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. 反编译工具reflector破解方法

    文件下载:http://files.cnblogs.com/lori/Red.Gate.Reflector7.6.rar 破解方法: 1. 断网2. 运行.NET Reflector,点击Help - ...

  2. phantomjs 乱码解决

    system = require('system') //传递一些需要的参数给js文件 address = system.args[1];//获得命令行第二个参数 ,也就是指定要加载的页面地址,接下来 ...

  3. Unique Paths II [LeetCode]

    Follow up for "Unique Paths": Now consider if some obstacles are added to the grids. How m ...

  4. HDU 4123（树的直径+单调队列）

    Bob’s Race Time Limit: 5000/2000 MS (Java/Others)    Memory Limit: 32768/32768 K (Java/Others)Total ...

  5. git在公司内部的使用实践(转)

    从2011.10月左右,开始在后台组推行git版本控制,到现在也差不多半年了,也形成了一套基于git flow的副官模式工作流程: 版本定义: 版本号使用x.x.x进行定义,第一个x代表大版本只有在项 ...

  6. Play Framework介绍：主要概念（转）

    Play Framework是一个Rails风格的Full-stack Java Web框架. MVC模型 Play应用遵循Web架构使用的MVC架构模式. 它将应用分离到不同的层中:表现层(Pres ...

  7. 《Play for Java》学习笔记（一）项目框架

    从今天开始认真复习<Play for JAVA>,该书以一个案例为主线,以前为应付项目马马虎虎看了一遍,好多地方都不明白!现在跟着这本书再走一遍,认真模拟,当做一个项目啦!! 一.Play ...

  8. oracle查锁表SQL

    SELECT l.session_id sid, s.serial#, l.locked_mode, l.oracle_username, s.user#, l.os_user_name,s.mach ...

  9. 使用AlarmManager设置闹钟----之一

    import java.util.Calendar; import android.os.Bundle;import android.app.Activity;import android.app.A ...

  10. 开始→运行（cmd）命令大全

    gpedit.msc-----组策略 sndrec32-------录音机 Nslookup-------IP地址侦测器 explorer-------打开资源管理器 logoff---------注 ...