【博文转载】HTML5的PLACEHOLDER属性

标签： HTML5 技术博文 | 发表时间：2012-06-21 18:37 | 作者：HTML5研究小组
出处：http://www.mhtml5.com
西风瘦马 发布于 二月 17, 2011

HTML5对Web Form做了许多增强，比如input新增的type类型、Form Validation等。Placeholder是HTML5新增的另一个属性，当input或者textarea设置了该属性后，该值的内容将作为灰字提示显示在文本框中，当文本框获得焦点时，提示文字消失。以前要实现这效果都是用JavaScript来控制才能实现：

HTML:

  1. <input id=”t1″ type=”text” placeholder=”请输入文字” />

 

传统方式实现的灰字提示：

placeholder实现的灰字提示：

(如果看不到左边文本框中的文字，说明你的浏览器不支持placeholder)

由于placeholder是个新增属性，目前只有少数浏览器支持，如何检测浏览器是否支持它呢？(更多HTML5/CSS3特性检测可以访问)

JAVASCRIPT:

  1. function hasPlaceholderSupport() {
  2. return ’placeholder’ in document.createElement(‘input’);
  3. }

 

现在支持的浏览器有：Firefox4.0+、Chrome4.0+、Safari4.0+，Opera 11、IE9 RC2尚不支持。

默认提示文字是灰色的，可以通过CSS来改变文字样式：

CSS:

  1. /* all */
  2. ::-webkit-input-placeholder { color:#f00; }
  3. input:-moz-placeholder { color:#f00; }
  5. /* individual: webkit */
  6. #field2::-webkit-input-placeholder { color:#00f; }
  7. #field3::-webkit-input-placeholder { color:#090; background:lightgreen; text-transform:uppercase; }
  8. #field4::-webkit-input-placeholder { font-style:italic; text-decoration:overline; letter-spacing:3px; color:#999; }
  10. /* individual: mozilla */
  11. #field2:-moz-placeholder { color:#00f; }
  12. #field3:-moz-placeholder { color:#090; background:lightgreen; text-transform:uppercase; }
  13. #field4:-moz-placeholder { font-style:italic; text-decoration:overline; letter-spacing:3px; color:#999; }

 

兼容其他不支持placeholder的浏览器：

JAVASCRIPT:

  1. var PlaceHolder = {
  2. _support: (function() {
  3. return ’placeholder’ in document.createElement(‘input’);
  4. })(),
  6. //提示文字的样式，需要在页面中其他位置定义
  7. className: ’abc’,
  9. init: function() {
  10. if (!PlaceHolder._support) {
  11. //未对textarea处理，需要的自己加上
  12. var inputs = document.getElementsByTagName(‘input’);
  13. PlaceHolder.create(inputs);
  14. }
  15. },
  17. create: function(inputs) {
  18. var input;
  19. if (!inputs.length) {
  20. inputs = [inputs];
  21. }
  22. for (var i = 0, length = inputs.length; i <length; i++) {
  23. input = inputs[i];
  24. if (!PlaceHolder._support && input.attributes && input.attributes.placeholder) {
  25. PlaceHolder._setValue(input);
  26. input.addEventListener(‘focus’, function(e) {
  27. if (this.value === this.attributes.placeholder.nodeValue) {
  28. this.value = ”;
  29. this.className = ”;
  30. }
  31. }, false);
  32. input.addEventListener(‘blur’, function(e) {
  33. if (this.value === ”) {
  34. PlaceHolder._setValue(this);
  35. }
  36. }, false);
  37. }
  38. }
  39. },
  41. _setValue: function(input) {
  42. input.value = input.attributes.placeholder.nodeValue;
  43. input.className = PlaceHolder.className;
  44. }
  45. };
  47. //页面初始化时对所有input做初始化
  48. //PlaceHolder.init();
  49. //或者单独设置某个元素
  50. //PlaceHolder.create(document.getElementById(‘t1′));

 

相关网页：
http://dev.w3.org/html5/spec/Overview.html#the-placeholder-attribute

 

转载自： http://blog.tugai.net/2011/02/17/html5-placeholder/

 

相关 [html5 placeholder 属性] 推荐：

HTML5里的placeholder属性

- - WebHek
HTML5里新引入很多有趣的新特征；有些体现在HTML里，有些是JavaScript API，全部非常的有用. 其中我最喜欢的一个特征就是文本框(INPUT)里的 placeholder属性. placeholder属性能够让你在文本框里显示提示信息，一旦你在文本框里输入了什么信息，提示信息就会隐藏.

【博文转载】HTML5的PLACEHOLDER属性

- - HTML5研究小组
西风瘦马 发布于 二月 17, 2011. HTML5对Web Form做了许多增强，比如input新增的type类型、Form Validation等. Placeholder是HTML5新增的另一个属性，当input或者textarea设置了该属性后，该值的内容将作为灰字提示显示在文本框中，当文本框获得焦点时，提示文字消失.

HTML5 placeholder实际应用经验分享及拓展

- - 张鑫旭-鑫空间-鑫生活
本文地址： http://www.zhangxinxu.com/wordpress/?p=2169. 一、HTML5 placeholder相关的引言. placeholder在英汉词典中解释成了“占位符”. 要理解并不难，请看此场景：. ”您可能会疑问，“这不是就是狗狗树下撒尿尿”. 确实，该场景可以较好的诠释 placeholder“占位符”之意.

html5全局属性spellcheck

- Stanley - Designsor
不多说，截图看一下说明问题：. 设置元素的这个属性为false即可关闭拼写检查：. 默认为true值，如果设置为readonly或者disabled，则默认为false. 除了ie之外，ff，chrome，safari，opera都支持~. 经常有产品或者测试问我这货是什么，这次你们都知道怎么和他们解释了吧，你妹的…….

HTML5元素的一些通用属性

- - 脚本爱好者
HTML 5: 元素的通用属性. 元素的通用属性 - accesskey, style, class, title, tabindex, id, dir, spellcheck, hidden, contenteditable, contextmenu, draggable, dropzone. 1、accesskey - 用于定义快捷键.

【转载】HTML5 Audio/Video 标签,属性,方法,事件汇总

- - HTML5研究小组
autoplay：自动播放. controls：浏览器自带的控制条.

【转载】HTML5有效提升iFrame安全性 新增Sandbox属性

- - HTML5研究小组
HTML 5将针对iframe元素增加sandbox属性，可以防止不信任的Web页面执行某些操作. HTML 5规范的编辑Ian Hickson谈到了sandbox的好处，它可以防止如下操作：. 访问父页面的DOM（从技术角度来说，这是因为相对于父页面iframe已经成为不同的源了）. 通过脚本嵌入自己的表单或是操纵表单.

预览文章: HTML5 视频播放事件属性与API控件

- - BlogJava_首页
在过去，我们如果想在Web上播放视频，也是都是通过Flash来播放，同样并不是所有的浏览器都安装了Flash播放器插件，而现在我们在HTML5中，就能完全脱离Flash或其他的插件来播放视频了. 视频格式：avi、rmb、wmv、mpeg4、ogg、webm. 视频主要有三部分组成：视频、音频、编码格式.

HTML5 logo 发布

- Greyby - 酷壳 - CoolShell.cn
2011年1月19日，W3C发布了HTML5的log，打开W3C的页面，下在的图片印入眼前. 我的第一感觉，就像是看到了小时候看的八一电影制片产的电影. 这分明是号召全世界的无产Web程序员们团结起来，不畏艰难，不怕牺牲，一定要把HTML5的革命事业进行到底. 所以，请各位Web程序员不但在你们的HTML5的网页上加上下面的徽章（关于各个徽章的含义，请参看这里）.