placeholder是html5<input>标签的一个属性，placeholder 属性提供可描述输入字段预期值的提示信息（hint）。该提示会在输入字段为空时显示，并会在字段获得焦点时消失。

　　　注释：placeholder 属性适用于以下的 <input> 类型：text, search, url, telephone, email 以及 password。

　　　例子：　　

　　   <!DOCTYPE HTML>
        <html>
        　　<body>

　　  　　<form action="/example/html5/demo_form.asp" method="get">
　　  　　　　<input type="search" name="user_search" placeholder="Search W3School" />
　　  　　　　<input type="submit" />
　　  　　</form>

　　 　　</body>
　　 </html>

　　  实际效果：

　　

　　 输入字符后：

　　

　　 目前浏览器的支持情况

浏览器 IE6/7/8/9 IE10+ Firefox Chrome Safari 
是否支持 NO YES YES YES YES

　　然而，虽然IE10+支持placeholder属性，它的表现与其它浏览器也不一致

  • IE10+里鼠标点击时（获取焦点）placeholder文本消失
  • Firefox/Chrome/Safari点击不消失，而是键盘输入时文本消失

　　那么对于IE6-9的浏览器怎么办呢，处理这类兼容性有关的问题，少不了浏览器的判断。但是一般的解决核心是要判断的不是是不是IE(因以后IE会支持), 而是是否支持placeholder属性。请参见如下代码：

　　js代码：

　　//判断是否支持placeholder
 　　function _placeholderSupport(){
  　  　　function placeholderSupport(){
   　　　 　　return 'placeholder' in document.createElement('input');
  　　　  }
  　  　　if(!placeholderSupport()){
   　　    　　$('[placeholder]').focus(function(){
    　　　　   var input = $(this);
    　　　　　if(input.val() == input.attr('placeholder')){
     　　　　  　　input.val('');
     　　　　　　  input.removeClass('placeholder');
    　　　　　}
   　　     　  }).blur(function(){
    　　　 　　　　var input = $(this);
    　　　　　 　　if(input.val() == ''||input.val() == input.attr('placeholder')){
     　　　　　　　　　input.addClass('placeholder');
     　　　　　　   　　input.val(input.attr('placeholder'));
    　　　　　 　　}
   　　　　　　}).blur();
  　　　　};
 　　}

　　

　　html代码：

　　<input id="telephone_number" type="text" class="fl" size="18" style="padding:8px 0;font-size:20px;font-weight:bold;" placeholder="请输入电话号码"/>

　　参考地址：http://www.w3school.com.cn/tags/att_input_placeholder.asp

　　　　　　　http://blog.sina.com.cn/s/blog_5734af8f01014hjn.html

　　　　　　　http://www.cnblogs.com/snandy/p/4115883.html

html5 placeholder的更多相关文章

  1. html5 placeholder ie 不兼容问题 解决方案

    解决HTML5 placeholder的方案 来源:   时间:2013-09-05 20:06:49   阅读数:11375 分享到: 0 [导读] 使低版本浏览器支持Placeholder有很多方 ...

  2. IE8 不支持html5 placeholder的解决方案

    IE8不支持html5 placeholder的解决方法. /** * jQuery EnPlaceholder plug * version 1.0 2014.07.01戈志刚 * by Frans ...

  3. Cross-Browser HTML5 Placeholder Text

    One of the nice enhancement in HTML5 web form is being able to add placeholder text to input fields. ...

  4. （转）html5 Placeholder属性兼容IE6、7方法

    使低版本浏览器支持Placeholder有很多方法,都不是很完美,或多或少有点问题,且有些原生支持的浏览器在获得焦点时会清空Placeholder提示.发现zhihu的解决方法不错,特记录下 wind ...

  5. HTML5 placeholder(空白提示) 属性

    原文地址:HTML5′s placeholder Attribute 演示地址: placeholder演示 原文日期: 2010年08月09日 翻译日期: 2013年8月6日 浏览器引入了许多的HT ...

  6. 玩转 HTML5 Placeholder

    Placeholder(占位符) 是 HTML5 新增的一个 HTML 属性,用来对可输入字段的期望值提供提示信息,目前已经得到主流浏览器的广泛支持,使用方式非常简单: <input id=&q ...

  7. 让 IE 支持HTML5 placeholder

    HTML5 新增的placeholder属性已经得到现代浏览器的支持,旨在提供简单的API可以为文本输入框设置 描述输入字段预期值的提示信息(hint). 这是W3C在标准化的过程中对用户体验的更多考 ...

  8. HTML5 Placeholder实现input背景文字提示效果

    这篇文章我们来看看什么是input输入框背景文字提示效果,如下图所示: 这种效果现在网上非常的普遍流行,但大部分是使用JavaScript实现的.但HTML5给我们提供了新的纯HTML的实现方式,不需 ...

  9. jquery 小插件，完成“输入字段预期值的提示信息”，防html5 placeholder属性

    前言:在很多时候,我们需要文本框中显示默认值,获取焦点时,文字框中就会清空给的值,当失去焦点时,如果没有值,继续显示默认的文字,如果有输入值,就显示输入的值.现在项目中需要用到这个地方的功能比较多,于 ...

随机推荐

  1. 坑爹的对GBK编码的字符进行url编码

    url编码又叫百分号编码 现在的url编码十分混乱,都没有按照新标准来 对汉字都按照不同的编码后再进行url编码 2005年1月发布的RFC 3986,强制所有新的URI必须对未保留字符不加以百分号编 ...

  2. 笔记7：winfrom的一些知识点（一）

    一.MDI窗体 private void 添加窗体ToolStripMenuItem_Click(object sender, EventArgs e) { Form2 frm1 = new Form ...

  3. hdu----(5047)Sawtooth(大数相乘+数学推导)

    Sawtooth Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 65536/65536 K (Java/Others)Total Su ...

  4. Spring配置文件解析--集合注入方法

    <bean id="moreComplexObject" class="example.ComplexObject"> <property n ...

  5. maven install 时提示“程序包 javax.crypto不存在”

    但是javax.crypto是在jdk的jre\lib目录下的 解决方案: <compilerArguments> <bootclasspath>${java.home}/li ...

  6. 初始jQuery

    JQuery是继prototype之后又一个优秀的Javascript库.它是轻量级的js库 ,它兼容CSS3,还兼容各种浏览器(IE 6.0+, FF1.5+, Safari 2.0+, Opera ...

  7. <<薪资至少10K的一道题，你能拿下吗>>练习

    偶尔要写写算法,是我平时用来保持感觉的常用的方法.今天看到园子里一面试题,看了一下感觉也能实现,不过过程确实艰的,自认为自己对算法的感觉还不错.不过这题确实我也用了差不多一下午的时间,基本上把工作时间 ...

  8. Objective－C（二、类和对象）

     类和对象 #import是include的升级版,可以自动防止重复包含,所以注意:大家以后在引入头文件的时候都使用import Foundation是一个框架,Foundation.h是Founda ...

  9. idea tomcat +eclipse式的部署

    使用习惯了eclipse, 还没开始使用maven, 使用idea 有些不太习惯,现在记录下来,以备忘. /*这一步在tomcat使用external source时,其实是不起作用的**/   a. ...

  10. Kafka简要图解

    LinkedIn贡献的分布式消息系统 - 请参考这里 kafka集群:producer写入消息,consumer读取消息 消息分为不同主题,每个主题可以分为多个partition(并行),每个part ...