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. redis.conf详解

    # Redis示例配置文件 # 注意单位问题:当需要设置内存大小的时候,可以使用类似1k.5GB.4M这样的常见格式: # # 1k => bytes # 1kb => bytes # 1 ...

  2. [Java] 数据库连接管理类

    package com.wdcloud.monitoring.common; /** * @Description: TODO * @date: 2015��11��19�� ����10:23:16 ...

  3. JavaScript设计模式的简单理解

    设计模式可以理解为一系列的代码框架,我觉得主要涉及封装的概念.把实现某一功能的代码段封装在函数中,可以方便调用,同时利于代码的复用,提高了代码的可维护性.下面简单介绍一下几种设计模式的个人感受. 1. ...

  4. mvc伪静态<四> 伪静态后静态页面或者引用的css和图片失效

    引用的css和图片失效的解决办法 把样式引用文件的相对路径改成绝对路径就可以了 比如原先的引用路径为:<link href="~/Content/css/style.css" ...

  5. 多线程相关Interlocked.Increment问题

    今天群里有人问到如下代码打印出来的东西为什么不是连续得,所以有大神解释了原因.在这过程中遇到了些奇怪的情况 static void Main(string[] args) { for (int i = ...

  6. CommonJS规范(转)

    概述 CommonJS是服务器端模块的规范,Node.js采用了这个规范. 根据CommonJS规范,一个单独的文件就是一个模块.加载模块使用require方法,该方法读取一个文件并执行,最后返回文件 ...

  7. lucene底层数据结构——底层filter bitset原理，时间序列数据压缩将同一时间数据压缩为一行

    如何联合索引查询? 所以给定查询过滤条件 age=18 的过程就是先从term index找到18在term dictionary的大概位置,然后再从term dictionary里精确地找到18这个 ...

  8. [转]BeginInvoke和EndInvoke方法浅析

    开发语言:C#3．0   IDE:Visual Studio 2008   一.C#线程概述   在操作系统中一个进程至少要包含一个线程,然后,在某些时候需要在同一个进程中同时执行多项任务,或是为了提 ...

  9. linux 一些命令

    1.查看cpu个数 cat /proc/cpuinfo |grep "physical id" |sort | uniq |wc -l 2 2.查看cpu逻辑个数 cat /pro ...

  10. js中获得当前时间是年份和月份

    js中获得当前时间是年份和月份,形如:201208       //获取完整的日期 var date=new Date; var year=date.getFullYear();  var month ...