实现跨浏览器的HTML5占位符
译自:http://webdesignerwall.com/tutorials/cross-browser-html5-placeholder-text
译者:蒋宇捷,转载请标明出处(http://blog.csdn.net/hfahe)
HTML5表单的最大优点之一是可以为输入区域添加占位符文字。占位符属性允许可以为一个空的或者没有焦点的表单输入框显示文本,在获得焦点后消失。这是一个非常不错的特性,但是还不被所有的浏览器所支持。这个教程将向你展示如何使用Modernizr来检测浏览器是否支持占位符,否则使用jQuery来动态的显示兼容性的占位符文本。
示例
源码下载
最原始的Javascript方式
在拥有占位符属性之前,我们依靠Javascript来制造占位符文本。下面是一个例子,文本被添加到value属性。当获得焦点后,它会检查值是否是“search”并返回空来清空输入框。如果值为空,它返回“search”。就像你看到的一样,这个方式并没有太大的效率,因为必须要检查每一个输入区域。
<input type="text" value="Search" onfocus="if (this.value == 'Search') {this.value = '';}" onblur="if (this.value == '') {this.value = 'Search';}">
jQuery占位符(示例)
现在使用HTML5占位符,比起value属性更加语义化。但是,占位符属性还不被所有的浏览器所支持。为了支持所有浏览器,使用Modernizr和jQuery相当方便。Modernizr使用来检测是否支持占位符属性。如果不支持placeholder,将运行jQuery代码。它寻找所有拥有占位符属性的元素并存储在一个变量里。然后它比较输入值和占位符的值。如果输入值为空,将显示占位符文本并为输入区域添加一个“placeholder”类。看看示例。要在你的站点上使用,下载Modernizr和jQuery库并粘贴下面的代码到你的HTML页面里(确保jQuery.js和modernizr.js文件在正确的路径下)。
<mce:script src="jquery.js" mce_src="jquery.js"></mce:script>
<mce:script src="modernizr.js" mce_src="modernizr.js"></mce:script>
$(document).ready(function(){
if(!Modernizr.input.placeholder){
$('[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();
$('[placeholder]').parents('form').submit(function() {
$(this).find('[placeholder]').each(function() {
var input = $(this);
if (input.val() == input.attr('placeholder')) {
input.val('');
}
})
});
}
</script>
移除Webkit Search输入框的样式
Webkit浏览器为search输入框添加了额外的样式。要移除它们,添加如下的CSS代码:
input[type=search] {
-webkit-appearance: none; // 译者注:取消Webkit浏览器默认样式
}
input[type="search"]::-webkit-search-decoration,
input[type="search"]::-webkit-search-cancel-button {
display: none;
}
【实现跨浏览器的HTML5占位符】相关文章
2. DalekJS – 基于 JavaScript 实现跨浏览器的自动化测试
6. 一个跨浏览器的响应式设计辅助工具类库 - CSS Browser Selector +
本文来源:https://www.51html5.com/a3351.html
﹝实现跨浏览器的HTML5占位符﹞相关内容
- HTML5下浏览器的两大趋势
- 兼容所有浏览器的CSS3圆角
- Eclipse即将发布基于浏览器的IDE
- 移动浏览器的“隐形危机”
- JavaScript中Get和Set访问器的实现
- 神奇的HTML5:现在Chrome浏览器支持直接通过Gmail打开邮件链接
- 浏览器碎片化问题严重,71%的HTML5开发者担忧
- 浏览器碎片化问题严重 71%的HTML5开发者担忧
- [科普文] 关于浏览器内核的一些小知识,明明白白选浏览器
- 让浏览器更理解人 海豚浏览器推“海豚声纳”功能