跨浏览器的HTML5占位文本(PlaceHolder)方案

最新推荐文章于 2024-10-16 17:08:42 发布

javazhuanzai

最新推荐文章于 2024-10-16 17:08:42 发布

阅读量296

点赞数

分类专栏： javaee 文章标签：浏览器 html5 search function input jquery

javaee 专栏收录该内容

789 篇文章 0 订阅

订阅专栏

======================================================
注：本文源代码点此下载
======================================================

html5里面一个非常不错的扩展功能就是可以在文本框上面增加占位文本。占位文本(placeholder)是指当一个文本框没有被focus的时候显示的是提示文字,当他被点击之后就显示空白。这个功能很不错,但是并不是所有的浏览器都支持。这篇文章就来讨论一下怎样用比较简单的方法可以让所有浏览器都支持这个特性。

这里是例子

这里可以下载

传统的解决办法

在我们有这个属性之前,我们一般是通过javascript来实现这个效果。这段文字被设置在value属性里面,当聚焦了之后,检验文本框的值是否等于默认值,如果是则清空文本框。当文本框失去焦点的时候,再检查是否为空,为空则再写上默认值。这个方法很不高效,而且每个文本框都得去检测。

type="text" value="search" οnfοcus="if (this.value == 'search') {this.value = '';}" οnblur="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;

}

转载请注明:

作者:rockux–web前端

出自:跨浏览器的html5占位文本(placeholder)方案

绿色通道:好文要顶关注我收藏该文与我联系

======================================================
在最后，我邀请大家参加新浪APP，就是新浪免费送大家的一个空间，支持PHP+MySql，免费二级域名，免费域名绑定这个是我邀请的地址，您通过这个链接注册即为我的好友，并获赠云豆500个，价值5元哦！短网址是http://t.cn/SXOiLh我创建的小站每天访客已经达到2000+了，每天挂广告赚50+元哦，呵呵，饭钱不愁了，\(^o^)/