HardBirch

实现跨浏览器的HTML5占位符

时间:11-04-03 栏目:HTML5移动开发 作者:张飞不张,文采横飞 评论:2 点击: 1,851 次

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

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

    HTML5表单的最大优点之一是可以为输入区域添加占位符文字。占位符属性允许可以为一个空的或者没有焦点的表单输入框显示文本,在获得焦点后消失。这是一个非常不错的特性,但是还不被所有的浏览器所支持。这个教程将向你展示如何使用Modernizr来检测浏览器是否支持占位符,否则使用jQuery来动态的显示兼容性的占位符文本。

示例

源码下载

最原始的Javascript方式

    在拥有占位符属性之前,我们依靠Javascript来制造占位符文本。下面是一个例子,文本被添加到value属性。当获得焦点后,它会检查值是否是“search”并返回空来清空输入框。如果值为空,它返回“search”。就像你看到的一样,这个方式并没有太大的效率,因为必须要检查每一个输入区域。

 

jQuery占位符(示例)

    现在使用HTML5占位符,比起value属性更加语义化。但是,占位符属性还不被所有的浏览器所支持。为了支持所有浏览器,使用ModernizrjQuery相当方便。Modernizr使用来检测是否支持占位符属性。如果不支持placeholder,将运行jQuery代码。它寻找所有拥有占位符属性的元素并存储在一个变量里。然后它比较输入值和占位符的值。如果输入值为空,将显示占位符文本并为输入区域添加一个“placeholder”类。看看示例。要在你的站点上使用,下载ModernizrjQuery库并粘贴下面的代码到你的HTML页面里(确保jQuery.jsmodernizr.js文件在正确的路径下)。

 

移除Webkit Search输入框的样式

    Webkit浏览器为search输入框添加了额外的样式。要移除它们,添加如下的CSS代码:

 

贡献

    jQuery代码来自Nico Hagenburger.

声明: 本文由( 张飞不张,文采横飞 )原创编译,转载请保留链接: 实现跨浏览器的HTML5占位符

实现跨浏览器的HTML5占位符:目前有2 条留言

  1. 板凳
    liulei3666825:

    HTML5 有传说中的那么叼么??????

    2011-04-06 19:34 [回复]
  2. 沙发
    libingjy:

    HTML学习中 …….

    2011-10-20 13:43 [回复]

发表评论


QQ群互动

Linux系统与内核学习群:194051772

WP建站技术学习交流群:194062106

魔豆之路QR

魔豆的Linux内核之路

魔豆的Linux内核之路

优秀工程师当看优秀书籍

优秀程序员,要看优秀书!

赞助商广告

友荐云推荐