HTML5资讯

当前位置: HTML5技术网 > HTML5资讯 > 实现跨浏览器的HTML5占位符

实现跨浏览器的HTML5占位符

译自:http://webdesignerwall.com/tutorials/cross-browser-html5-placeholder-text

译者:蒋宇捷,转载请标明出处(http://blog.csdn.net/hfahe)

       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;

}


【实现跨浏览器的HTML5占位符】相关文章

1. 实现跨浏览器的HTML5占位符

2. DalekJS – 基于 JavaScript 实现跨浏览器的自动化测试

3. CSS实现跨浏览器兼容性的盒阴影效果

4. 基于 WebSocket 构建跨浏览器的实时应用

5. 一个跨浏览器的数字输入jQuery插件Stepper

6. 一个跨浏览器的响应式设计辅助工具类库 - CSS Browser Selector +

7. 构建手机浏览器云能力 实现跨平台多场景需求

8. 详述主流浏览器的HTML5音频支持情况

9. 海豚浏览器:手机浏览器的异类

10. Chrome发布新扩展 实现跨平台远程控制

本文来源:https://www.51html5.com/a3351.html

点击展开全部

﹝实现跨浏览器的HTML5占位符﹞相关内容

「实现跨浏览器的HTML5占位符」相关专题

其它栏目

也许您还喜欢