html5 placeholder

时间 2019-12-09

原文原文链接

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

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

　　　例子：　　浏览器

　　   <!DOCTYPE HTML>
        <html>
        　　<body>this

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

　　　　</body>
　　 </html>spa

　　实际效果：3d

　　输入字符后：orm

　　目前浏览器的支持状况htm

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

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

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代码：

　　参考地址：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