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. C++疑难杂症

    1.如果在类成员函数外部显示的调用其父类的某个接口. 2.对于一个父类的成员, 子类如何在构造函数中对其进行特殊的定制生成. 3.对于一个需要用常量来声明的类型, 如何定义这个常量.   比如int ...

  2. 在centos6.5中安装jdk

    一.下载jdk 下载地址 www.oracle.com,我这次安装的jdk是1.6版本的,以.bin结尾的,名称为 jdk-6u45-linux-i586.bin 二.安装步骤 1.在 /usr目录下 ...

  3. jqury.jqzoom插件--放大镜

    <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8&quo ...

  4. 30-Razor语法基础

    以往开发ASP.NET Web Form时,在ASPX页面上都会出现许多夹杂C#/VB.NET与HTML的情况,而先前使用<%...%>这种传统圆角括号的表示法会让HTML标签与ASP.N ...

  5. centos7 学习

    1.centos pid文件: 在Linux系统的目录/var/run下面一般我们都会看到很多的*.pid文件.而且往往新安装的程序在运行后也会在/var/run目录下面产生自己的pid文件.那么这些 ...

  6. nyoj------79拦截导弹

    拦截导弹 时间限制:3000 ms  |  内存限制:65535 KB 难度:3   描述 某国为了防御敌国的导弹袭击,发展中一种导弹拦截系统.但是这种导弹拦截系统有一个缺陷:虽然它的第一发炮弹能够到 ...

  7. java面试---summay

    1:合适的建立索引,数据量比较大的时候,如果频繁的进行修改插入则不建议建立索引! 2:什么时候适合建索引,在什么字段上面建立索引? (被当做查询条件的) 3:什么叫做编译错误,什么叫做运行时异常 能被 ...

  8. 解决tomcat部署多个虚拟机时报IllegalStateException: Web app root system property already set to 的问题

    解决tomcat部署多个虚拟机时报IllegalStateException: Web app root system property already set to 的问题 在web.xml中添加如 ...

  9. Java：一个简单的Java应用程序

    /** * 这是文档注释 * @version  * @author  */ /* 这之间的内容也是注释 */ //这是行注释 public class FirstSample { public st ...

  10. 使用Web Service进行网络编程-----Web Service简介

    Android应用通常都是运行在手机平台上,手机系统的硬件资源是有限的,不管是存储能力还是计算能力都是有限的,在Android系统上开发.运行一些单用户.小型应用是可能的,但对于需要进行大量的数据处理 ...