实现跨浏览器的HTML5占位符

​

译者：蒋宇捷，转载请标明出处

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

贡献

    jQuery代码来自​​Nico Hagenburger​​.