| 标题 | HTML5 placeholder(空白提示)属性介绍 |
| 范文 | 浏览器引入了许多的HTML5 特性: 有些是基于HTML的，有些是JavaScript APIs形式的,但都很有用。其中我最喜欢的一个就是为input元素引入了placeholder属性。 placeholder属性显示引导性文字直到输入框获取输入焦点,当有了用户输入内容后引导性内容将会自动隐藏。你肯定见过用JavaScript实现的这种技术成千上万次了,但是来自HTML5的原生支持一般来说会更好一些。 HTML 代码 如下： 代码如下: <input type="text" name="address" placeholder="请输入常住地址..."> 你要做的仅仅是添加一个placeholder属性域,以及一些引导性的文字内容,不需要额外的JavaScript脚本来实现这种效果，是不是感觉很棒? 测试 placeholder 的支持度 (注意这是2010年的文章，到现在，2013年，主流浏览器应该都支持了.) 既然 placeholder 是一个新的功能，那么测试浏览器的支持是很有必要的。JS代码如下： 代码如下: // 在JS中创建一个input元素，并判断元素有没有一个叫做placeholder的属性 // 如果浏览器支持的话，那么在js里面引用的DOM就会存在这个属性 function hasPlaceholderSupport() { var input = document.createElement('input'); return ('placeholder' in input); } 而如果浏览器不支持placeholder特性，那你就需要一个fallback策略来处理，比如MooTools,Dojo,或者其他JavaScript工具。(现在dojo可以用的少了，国内更多的是jQuery和ExtJS。) 代码如下: /* jQuery 代码,当然，记得引入jQuery的库哦*/ $(function(){ if(!hasPlaceholderSupport()){ // 获取address元素 var $address = $("input[name='address']"); placeholder = $address.attr("placeholder"); // 绑定 focus事件 $address.bind('focus',function(){ if(placeholder == $address.val()){ $address.val(''); } }); // 失去焦点事件 $address.bind('blur',function(){ if('' == $address.val()){ $address.val(placeholder); } }); } }); placeholder 是浏览器另一个伟大的附加属性用于取代js片段，你甚至可以编辑HTML5的placeholder样式. 全部代码如下： 代码如下: <!DOCTYPE HTML> <html> <head> <title> HTML5 placeholder属性演示 </title> <meta name="Generator" content="EditPlus"> <meta name="Author" content="renfufei@qq.com"> <meta name="Description" content="original=http://davidwalsh.name/html5-placeholder"> <script src="http://code.jquery.com/jquery-1.7.1.min.js"></script> <script> // 在JS中创建一个input元素，并判断元素有没有一个叫做placeholder的属性 // 如果浏览器支持的话，那么在js里面引用的DOM就会存在这个属性 function hasPlaceholderSupport() { var input = document.createElement('input'); return ('placeholder' in input); } /* jQuery 代码,当然，记得引入jQuery的库哦*/ $(function(){ if(!hasPlaceholderSupport()){ // 获取address元素 var $address = $("input[name='address']"); placeholder = $address.attr("placeholder"); // 绑定 focus事件 $address.bind('focus',function(){ if(placeholder == $address.val()){ $address.val(''); } }); // 失去焦点事件 $address.bind('blur',function(){ if('' == $address.val()){ $address.val(placeholder); } }); } }); </script> </head> <body> <div> <form method="post" action=""> <input type="text" name="address" placeholder="请输入常住地址..."> <input type="submit" value="测试"> </form> </div> </body> </html> |
| 随便看 |
|
在线学习网范文大全提供好词好句、学习总结、工作总结、演讲稿等写作素材及范文模板，是学习及工作的有利工具。