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

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

  传统的解决办法

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

<input type="text" value="Search" onfocus="if (this.value == 'Search') 
{this.value = '';}
" onblur="if (this.value == '') {this.value = 'Search';}">

it知识库跨浏览器的HTML5占位文本(PlaceHolder)方案,转载需保留来源!

郑重声明:本文版权归原作者所有,转载文章仅为传播更多信息之目的,如作者信息标记有误,请第一时间联系我们修改或删除,多谢。