【HTML5】跨浏览器的HTML5占位文本(PlaceHolder)方案
来源:互联网 发布:mac 调整鼠标指针大小 编辑:程序博客网 时间:2024/06/01 08:17
HTML5里面一个非常不错的扩展功能就是可以在文本框上面增加占位文本。占位文本(PlaceHolder)是指当一个文本框没有被focus的时候显示的是提示文字,当他被点击之后就显示空白。这个功能很不错,但是并不是所有的浏览器都支持。这篇文章就来讨论一下怎样用比较简单的方法可以让所有浏览器都支持这个特性。
传统的解决办法
在我们有这个属性之前,我们一般是通过Javascript来实现这个效果。 这段文字被设置在value属性里面,当聚焦了之后,检验文本框的值是否等于默认值,如果是则清空文本框。当文本框失去焦点的时候,再检查是否为空,为空则再写上默认值。这个方法很不高效,而且每个文本框都得去检测。
<input type="text" value="Search" onfocus="if (this.value == 'Search')
{this.value = '';}" onblur="if (this.value == '') {this.value = 'Search';}">
jQueyr 占位文本
现在有了HTML5之后,通过placeholder属性来设置就比value设置语义化的多了。然而,这个属性并不是所有的浏览器都支持,所以我们需要jQuery和Modernizr的支持。
在这里Modernizr是用来检测浏览器是否支持一些HTML5属性的。如果浏览器不支持,那么再运行jQuery代码。它会先找到所有带PlaceHolder属性的元素,然后存储在一个变量中。然后会将元素的value和这个变量对比,如果为空则显示placeholder里面的内容,并且会增加一个”placeholder”的css样式。
如果你想在你的网站中使用这个东西,需要引入jQuery和Modernizr,注意放置在合适的路径下,然后把下面的代码复制进去。
<script src="jquery.js"></script>
<script src="modernizr.js"></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搜索框样式
Webkit内核的浏览器会给搜索框增加一些额外的样式,通过下面的CSS可以去掉这个样式:
input[type=search] {
-webkit-appearance: none;
}
input[type="search"]::-webkit-search-decoration,
input[type="search"]::-webkit-search-cancel-button {
display: none;
}
0 0
- 【HTML5】跨浏览器的HTML5占位文本(PlaceHolder)方案
- 跨浏览器的HTML5占位文本(PlaceHolder)方案
- 跨浏览器的HTML5占位文本(PlaceHolder)方案
- HTML5 - 使用占位符文本placeholder添加文本框提示
- 占位符文本(Placeholder text),html5里面的一个知识点!
- 解决HTML5 Placeholder兼容性的方案
- HTML5 input Placeholder (占位符) 样式
- HTML5 的 PLACEHOLDER 属性
- Html5 placeholder 兼容(不支持的浏览器ie)
- HTML5 placeholder在低版本浏览器的解决方法
- HTML5 Placeholder
- HTML5里的placeholder属性
- HTML5里的placeholder属性
- HTML5里的placeholder属性
- 兼容浏览器的html5标签的几个方案介绍
- flash + html5 实现浏览器兼容的文件上传方案
- HTML5+flash打造兼容各浏览器的文件上传方案
- HTML5+flash打造兼容各浏览器的文件上传方案
- [Linux]Linux下如何查看有多少文件夹,多少子目录
- 异步调用四大方法
- 关于Android的震动器Vibrator使用一点心得
- MediaPlayerActivity playNextMusic()
- 使用富文本修改字体的风格NSMuttableAttstring
- 【HTML5】跨浏览器的HTML5占位文本(PlaceHolder)方案
- 棋盘上的麦子(BigInteger处理大数问题)
- expect set timeout -1 永不超时
- Android 替换全局字体
- maven本地仓库和镜像源设置
- Confluence简介
- 公司实习SEO优化日记:2016年2月16日
- fragment 懒加载 viewpager 取消预加载
- iOS闭包循环引用讲解