HTML5实践-实现跨浏览器HTML5文字占位符-placeholder的具体介绍(2)-木庄网络博客

当前第2页返回上一页

　　Modernizr用来判断浏览器是否支持placeholder属性，如果不支持，则运行jquery语句。他会把所有包含placeholder属性的html元素找出来，并把他存在变量中。在元素获得和失去焦点的时候，脚本会判断value值和placeholder值，来决定value值最终的内容。

　　如果你想在自己的站点中使用这个功能，需要下载modernizr和jquery类库，并保证他们的引用地址正确。

<script src="jquery.js"></script>
<script src="modernizr.js"></script>
 
<script>(!'[placeholder]').focus( input = $( (input.val() == input.attr('placeholder''''placeholder' 
input = $( (input.val() == '' || input.val() == input.attr('placeholder''placeholder''placeholder''[placeholder]')
.parents('form').submit().find('[placeholder]').each( input = $( (input.val() == input.attr('placeholder'''</script>

　　移出webkit搜索框样式

　　webkit浏览器为搜索框添加了额外的样式，我们需要使用下面的脚本去移出他。

input[type=search] {    -webkit-appearance: none;}input[type="search"]::-webkit-search-decoration, 
input[type="search"]::-webkit-search-cancel-button {
    display: none;
}