Heim >Web-Frontend >HTML-Tutorial >【求助】留言界面一种绚丽效果的实现_html/css_WEB-ITnose
【求助】留言界面一种绚丽效果的实现_html/css_WEB-ITnose
- WBOYOriginal
- 2016-06-24 12:16:131056Durchsuche
给大家一个案例： http://www.ruiec.com/message/
就是这个页面他的留言效果是怎么做出来的！
1/鼠标点进去后边框发光
2/边框里面的文字如果你输入字后就会自动消失！
这两种效果是怎么实现的！
回复讨论(解决方案)
这个很简单的，js的事件，如obj.focus() ｛｝
边框发光效果可以用css3 的伪类实现,具体搜一下就行
第二个用 JQuery：
$("#input_text").bind("click",function()
{
$(this).val("");
});//
什么效果,看不到.不兼容.
有时候,边框高亮是浏览器提供的效果.
文字消失,是在键盘输入事件onkeydown中让原来的内容等于"".
onkeydown时,先检测文本框内容是否为原来预置的内容,如果是就令其为空.如果不是则不处理.
监视按键,效率稍差一些.提高效率的办法就是在文本框的onfocus事件中做上面的事情.
第一个用伪类实现，第二个我帮你实现了，代码如下
<!DOCTYPE html> <head> <style> </style> <script> function cleartext() { var inputtext=document.getElementById("inputtext"); if(inputtext.value=="请输入姓名") { inputtext.value=""; inputtext.style.color="black"; } } </script> <body><body><input type="text" id="inputtext" style="font-weight:100; color:#999999; border:1px solid black" value="请输入姓名" onFocus="cleartext();"/><input type="text" /></body> </body></html>
<style type="text/css"> .input_on{ width:185px;padding:4px 8px 0pt 3px;height:20px;border:1px solid #999;background-color:#FFFFCC;} .input_out{width:185px;padding:4px 8px 0pt 3px;height:20px;border:1px solid #CCC;background-color:#FFF;} </style><input type="text" value="" onfocus="$(this).removeClass('input_out');$(this).addClass('input_on');" onblur="$(this).removeClass('input_on');$(this).addClass('input_out');" onmousemove="$(this).removeClass('input_out');$(this).addClass('input_on');" onmouseout="$(this).removeClass('input_on');$(this).addClass('input_out');" /> 再加上LZ的onfocus事件
ls的onfocus事件 打错了
第一个用css样式，input.focus
第二个,input属性placeholder
第二个是HMLT5的特性
Stellungnahme：
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Vorheriger Artikel：问下大家现在做前端手上都准备了些什么工具呢_html/css_WEB-ITnoseNächster Artikel：怎样显示空段落？_html/css_WEB-ITnose