HTML5 placeholder(空白提示) 属性
原文地址: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属性域,以及一些引导性的文字内容,不需要额外的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>
HTML5 placeholder(空白提示) 属性的更多相关文章
- html5文本框提示文字属性为placeholder
html5文本框提示文字属性为placeholder 例子: <textarea id="comment" class="commentCont" n ...
- HTML5表单提示placeholder属性兼容IE
placeholder 属性提供可描述输入字段预期值的提示信息(hint). 该提示会在输入字段为空时显示,并会在字段获得焦点时消失. 注释:placeholder 属性适用于以下的 <inpu ...
- (转)html5 Placeholder属性兼容IE6、7方法
使低版本浏览器支持Placeholder有很多方法,都不是很完美,或多或少有点问题,且有些原生支持的浏览器在获得焦点时会清空Placeholder提示.发现zhihu的解决方法不错,特记录下 wind ...
- html5 placeholder ie 不兼容问题 解决方案
解决HTML5 placeholder的方案 来源: 时间:2013-09-05 20:06:49 阅读数:11375 分享到: 0 [导读] 使低版本浏览器支持Placeholder有很多方 ...
- HTML5系列一(属性概述)
HTML5概述 HTML5於2004年被WHATWG(网页超文本技术工作小组)提出,於2007年被W3C接纳 在2008年1月22日,第一份正式草案已公布.WHATWG表示该规范是目前正在进行的工作, ...
- IE8 不支持html5 placeholder的解决方案
IE8不支持html5 placeholder的解决方法. /** * jQuery EnPlaceholder plug * version 1.0 2014.07.01戈志刚 * by Frans ...
- 解决PL/SQL Dev连接Oracle弹出空白提示框
第一次安装Oracle,装在虚拟机中,用PL/SQL Dev连接远程数据库的时候老是弹出空白提示框,网上找了很久,解决方法也很多,可是就是没法解决我这种情况的. 没办法,只能自己研究,经过大概一天时间 ...
- PL/SQL Dev连接Oracle弹出空白提示框的解决方法分享
第一次安装Oracle,装在虚拟机中,用PL/SQL Dev连接远程数据库的时候老是弹出空白提示框,网上找了很久,解决方法也很多,可是就是没法解决我这种情况的. 出现这种问题,解决方法大概有这几种: ...
- HTML5表单新属性
HTML5表单新属性 autofocus 自动聚焦 <input type="text" autofocus> placeholder占位文本 tel ...
随机推荐
- CMD远程连接服务器上的MySQL
1.打开CMD命令行. 2.输入mysql -h要远程的IP地址 -u设置的MySQL用户名 -p登录用户密码 例如:mysql -h192.168.0.110 -uroot -p1233 (如果不能 ...
- IO复制多级目录 控制台输入文件目录然后把目录下java文件复制到 D: 并统计java个数
package cn.itcast_05; import java.io.BufferedInputStream; import java.io.BufferedOutputStream; impor ...
- 关于ubuntu14.04LTS 64位 播放优酷视频
起因:chrome无法播放优酷视频,然后换firefox发现居然没有装flash 插件. 解释:关于chrome在网上看到了不少说法,说chrome新版本的不支持adobe flash之类的,但是这些 ...
- Go 语言函数闭包
Go 语言支持匿名函数,可作为闭包.匿名函数是一个"内联"语句或表达式.匿名函数的优越性在于可以直接使用函数内的变量,不必申明. 以下实例中,我们创建了函数 getSequence ...
- Mac小技巧:强制退出程序的六种方法
原帖地址: http://www.cnbeta.com/articles/175447.htm 1.使用键盘快捷键强制退出处于活跃状态的Mac程序 快捷键:Command+Option+Shift+E ...
- Android图表库MPAndroidChart(一)——了解他的本质,方能得心应手
Android图表库MPAndroidChart(一)--了解他的本质,方能得心应手 我们项目中经常会遇到一些统计图,比如折线图,线形图等,在一些运动健康类的App中尤其的常见,这画起来要命,我以前就 ...
- Dynamics CRM The difference between UserId and InitiatingUserId in Plugin
对于这两者的不同,MSDN的解释如下 • IExecutionContext.UserId Property: Gets the global unique identifier of the sys ...
- UIKit视图动画的微扩展
大熊猫猪·侯佩原创或翻译作品.欢迎转载,转载请注明出处. 如果觉得写的不好请多提意见,如果觉得不错请多多支持点赞.谢谢! hopy ;) 好久没写blog了,还不快快写来- ;] 我们知道在UIKit ...
- Java进阶(四十四)线程与进程的特征及区别
线程与进程的特征及区别 定义及特征 进程 指在系统中能独立运行并作为资源分配的基本单位,它是由一组机器指令.数据和堆栈等组成的,是一个能独立运行的活动实体. 进程的特征: 1.动态性:进程的实质是 ...
- 乐观的并发策略——基于CAS的自旋
悲观者与乐观者的做事方式完全不一样,悲观者的人生观是一件事情我必须要百分之百完全控制才会去做,否则就认为这件事情一定会出问题:而乐观者的人生观则相反,凡事不管最终结果如何,他都会先尝试去做,大不了最后 ...