HTML5 placeholder(空白提示) 属性
来源:互联网 发布:mac第三方卸载软件 编辑:程序博客网 时间:2024/06/06 09:03
原文地址:HTML5′s placeholder Attribute
演示地址: placeholder演示
原文日期: 2010年08月09日
翻译日期: 2013年8月6日
浏览器引入了许多的HTML5 特性: 有些是基于HTML的,有些是JavaScript APIs形式的,但都很有用。其中我最喜欢的一个就是为input元素引入了placeholder属性。
placeholder属性显示引导性文字直到输入框获取输入焦点,当有了用户输入内容后引导性内容将会自动隐藏。你肯定见过用JavaScript实现的这种技术成千上万次了,但是来自HTML5的原生支持一般来说会更好一些。
HTML 代码 如下:
<input type="text" name="address" placeholder="请输入常住地址...">
测试 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>
- HTML5 placeholder(空白提示) 属性
- HTML5 解决表单输入提示 placeholder 属性
- HTML5 的 PLACEHOLDER 属性
- html5新属性 placeholder
- HTML5----placeholder属性
- html5--placeholder属性
- HTML5中的placeholder属性
- HTML5里的placeholder属性
- HTML5里的placeholder属性
- HTML5里的placeholder属性
- HTML5----CSS输入框背景,颜色,内容提示效果-placeholder属性
- html5的placeholder属性(IE如何兼容placeholder属性)
- HTML5 placeholder美化input背景提示文字
- html5 Placeholder属性兼容IE6、7方法
- HTML5学习笔记——placeholder属性
- Html5的placeholder属性(IE兼容)
- html5 属性placeholder 不支持ie7 8 9
- html5新属性——placeholder
- STL中的常用的vector,map,set,Sort用法
- c语言学习笔记(12)——补码
- C++的名称查找顺序
- hdu 2128 Tempter of the Bone II ( bfs+不好搞的判重 )
- jQuery入门及选择器使用
- HTML5 placeholder(空白提示) 属性
- ASP.NET4.5Web API及非同步程序开发系列(1)
- hdu1166 敌兵布阵 线段树
- 增加eclipse启动的Tomcat内存的方法
- 添加onclick事件的时候尽量不要写关键字
- Java-测试框架之JUnit3和JUnit4使用区别的总结
- implement of power(double base, int expo), without using math library.
- c语言题---火柴棍
- c语言学习笔记(13)——链表