文本框输入内容提示消失的两种实现
2013-05-23 20:22
711 查看
第一种方法:
基于HTML5 input标签的新特性 - placeholder 。另外,x-webkit-speech 属性可以实现语音输入功能。
用span模拟,定位span,借助JS键盘事件判断输入,确定span里的内容显示隐藏。 原文链接:点击查看
View Code
基于HTML5 input标签的新特性 - placeholder 。另外,x-webkit-speech 属性可以实现语音输入功能。
1 <div><input type="email" name="email" spellcheck="false" placeholder="邮 箱" autofocus tabindex="1" x-webkit-speech></div> 2 <div><input type="password" name="password" placeholder="密 码" tabindex="2"></div>第二种方法:
用span模拟,定位span,借助JS键盘事件判断输入,确定span里的内容显示隐藏。 原文链接:点击查看
View Code
1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 2 <html xmlns="http://www.w3.org/1999/xhtml"> 3 <head> 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 5 <title>无标题文档</title> 6 <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js" type="text/javascript"></script> 7 <script type="text/javascript"> 8 $(document).ready(function(){ 9 10 $("#focus .input_txt").each(function(){ 11 var thisVal=$(this).val(); 12 //判断文本框的值是否为空,有值的情况就隐藏提示语,没有值就显示 13 if(thisVal!=""){ 14 $(this).siblings("span").hide(); 15 }else{ 16 $(this).siblings("span").show(); 17 } 18 //聚焦型输入框验证 19 $(this).focus(function(){ 20 $(this).siblings("span").hide(); 21 }).blur(function(){ 22 var val=$(this).val(); 23 if(val!=""){ 24 $(this).siblings("span").hide(); 25 }else{ 26 $(this).siblings("span").show(); 27 } 28 }); 29 }) 30 $("#keydown .input_txt").each(function(){ 31 var thisVal=$(this).val(); 32 //判断文本框的值是否为空,有值的情况就隐藏提示语,没有值就显示 33 if(thisVal!=""){ 34 $(this).siblings("span").hide(); 35 }else{ 36 $(this).siblings("span").show(); 37 } 38 $(this).keyup(function(){ 39 var val=$(this).val(); 40 $(this).siblings("span").hide(); 41 }).blur(function(){ 42 var val=$(this).val(); 43 if(val!=""){ 44 $(this).siblings("span").hide(); 45 }else{ 46 $(this).siblings("span").show(); 47 } 48 }) 49 }) 50 }) 51 </script> 52 <style type="text/css"> 53 form{width:400px;margin:10px auto;border:solid 1px #E0DEDE;background:#FCF9EF;padding:30px;box-shadow:0 1px 10px rgba(0,0,0,0.1) inset;} 54 label{display:block;height:40px;position:relative;margin:20px 0;} 55 span{position:absolute;float:left;line-height:40px;left:10px;color:#BCBCBC;cursor:text;} 56 .input_txt{width:398px;border:solid 1px #ccc;box-shadow:0 1px 10px rgba(0,0,0,0.1) inset;height:38px;text-indent:10px;} 57 .input_txt:focus{box-shadow:0 0 4px rgba(255,153,164,0.8);border:solid 1px #B00000;} 58 .border_radius{border-radius:5px;color:#B00000;} 59 h2{font-family:"微软雅黑";text-shadow:1px 1px 3px #fff;} 60 </style> 61 </head> 62 63 <body> 64 <form class="border_radius" id="focus"> 65 <h2>聚焦型提示语消失</h2> 66 <label><span>花瓣注册邮箱</span><input type="text" class="input_txt border_radius" /></label> 67 <label><span>密码</span><input type="text" class="input_txt border_radius" /></label> 68 </form> 69 <form class="border_radius" id="keydown"> 70 <h2>输入型提示语消失</h2> 71 <label><span>花瓣注册邮箱</span><input type="text" class="input_txt border_radius" /></label> 72 <label><span>密码</span><input type="text" class="input_txt border_radius" /></label> 73 </form> 74 75 </body> 76 </html>
相关文章推荐
- 两种方法实现文本框输入内容提示消失
- 两种方法实现文本框输入内容提示消失
- html5中文本框输入内容提示消失
- JS实现在文本框输入时自动弹出相关内容提示
- placeholder属性 点击文本框,输入值默认提示内容消失
- 文本框输入内容时,里面的提示信息自动消失 css
- html5中文本框输入内容提示消失
- 使用EasyUI实现文本框内容长度验证,对文本框输入内容提示“剩余可输入字数”
- 文本框内默认提示————请输入用户姓名(字体灰色),要求: (1)当文本框获得焦点时,默认提示消失 (2)当文本框失去焦点时,如果没有输入新内容,那么则显示原来的灰色字体内容; 如果有新内容输入则判断,如果长度小于10,则提示“姓名长度应该大于10个字符”
- 点击文本框内容消失,移开内容自动显示(两种方法)(原创)
- jQuery实现鼠标双击Table单元格变成文本框及输入内容后更新到数据库的方法
- 文本框输入时 实现自动提示(像百度、google一样)
- html中input文本框,初始里边有文字提示,当点击输入文字时,原文字消失
- js实现文本框提示,获得焦点消失!
- 文本框提示样式,鼠标点击获得焦点时提示内容消失
- 窗体上有两个文本框:一个文本框中最多输入字符6个;一个文本框中输入任何内容都显示*号。再添加一个按钮、2个单选按钮。实现单击按钮后,根据单选按钮,将对应文本框中内容显示在标签
- html input文本框 输入框提示(hint)内容的实现
- h5页面中虚化文本框默认内容,当输入文字后默认内容消失怎么做?
- js实现文本框输入内容的相加