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

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

这里是例子

这里可以下载

传统的解决办法

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

?

?

< 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 ;
}

?

引用地址：http://t.andycn.com/tb.php?sc=1e5b25&id=83