标签:
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属性,它的表现与其它浏览器也不一致
那么对于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
标签:
原文地址:http://www.cnblogs.com/iliuyuet/p/4546821.html