跨瀏覽器的HTML5占位文本(PlaceHolder)方案
摘要：占位文本(PlaceHolder)是指當一個文本框沒有被focus的時候顯示的是提示文字，當他被點擊之后就顯示空白。這個功能很不錯，但是并不是所有的瀏覽器都支持。這篇文章就來討論一下怎樣用比較簡單的方法可以讓所有瀏覽器都支持這個特性。
HTML5里面一個非常不錯的擴展功能就是可以在文本框上面增加占位文本。占位文本(PlaceHolder)是指當一個文本框沒有被focus的時候顯示的是提示文字，當他被點擊之后就顯示空白。這個功能很不錯，但是并不是所有的瀏覽器都支持。這篇文章就來討論一下怎樣用比較簡單的方法可以讓所有瀏覽器都支持這個特性。
傳統的解決辦法
在我們有這個屬性之前，我們一般是通過Javascript來實現這個效果。 這段文字被設置在value屬性里面，當聚焦了之后，檢驗文本框的值是否等于默認值，如果是則清空文本框。當文本框失去焦點的時候，再檢查是否為空，為空則再寫上默認值。這個方法很不高效，而且每個文本框都得去檢測。
<input type="text" value="Search" onfocus="if (this.value == 'Search')
{this.value = '';}" onblur="if (this.value == '') {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>
<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;
}
-webkit-appearance: none;
}
input[type="search"]::-webkit-search-decoration,
input[type="search"]::-webkit-search-cancel-button {
display: none;
}
全站熱搜
留言列表
