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. linux笔记：文件处理命令touch,cat,more,less,head,tail

    命令名称:touch功能:新建文件命令所在目录:/bin/touch用法:touch 文件名 命令名称:cat功能:显示文件内容命令所在目录:/bin/cat用法:cat [-n] 文件名参数:-n ...

  2. http协议分析工具【转】

    转自:http://www.cnblogs.com/klguang/p/4624333.html

  3. 开发完iOS应用，接下去你该做的事

    iOS专项总结 关于 analyze Clang 静态分析器 Slender Faux Pas Warning Leaks Time Profiler 加载时间 iOS App启动过程 帧率等 如何优 ...

  4. Hadoop概括——学习笔记<一>转

    前言 第一章主要讲的是hadoop基础知识.老师讲的还是比较全面简单的,起码作为一个非专业码农以及数据库管理人员,也能狗大致了解其特点 首先是概括图(以hadoop2.0为例)  一.Hadoop基础 ...

  5. SVG格式

    SVG格式 编辑 目 录 概述 简介 优势 实例 展现 1概述 SVG格式 SVG是一种用XML定义的语言,用来描述二维矢量及矢量/栅格图形.SVG提供了3种类型的图形对象:矢量图形(vectorgr ...

  6. struts2视频学习笔记 13-14（自定义局部和全局类型转换器（转换Date格式））

    课时13 自定义类型转换器 局部(对某个action类) package tutorial; import java.util.Date; public class HelloWorld { priv ...

  7. JFrame背景

    1.引言 在了解了JFrame面板的相关知识后,我们可以选择在RootPane根面板或LayeredPane面板中设置背景图案. 2.方法 对于大小固定的窗口背景设置如下: //导入图案 ImageI ...

  8. BootStrap 最佳资源合集(转)

    witter BootStrap是一款优秀的前端的框架,称得上是前端的一个框架利器.Web前端开发者每天都在与HTML.CSS.JavaScript打交道,然 而不少人都是在周而复始的写模板.样式和交 ...

  9. SSH由WAS/Tomcat/Weblogic迁移到JBOSS

    又是一个凌晨,又一次搞项目在新的中间件上的可部署性验证... 原来将项目部署到was7上,花了三个晚上到凌晨1点多的时间,总结出了只要将common-logging和wodenxx.jar两个jar包 ...

  10. UVALive 7297 Hounded by Indecision BFS

    题目链接:Hounded by Indecision 题意:map中给出小偷的位置,警察的位置.警察有一只狗,开始的时候警察和狗一起行动,也就是看做一个格子,当警察遇见小偷走过的格子时,狗就会嗅到它的 ...