time 
设为首页】【收藏本站
当前位置: 主页 > WEB教程 > Html教程 > 【HTML5实践教程】7、 HTML5文字占位符placeholder的判断及跨浏览器兼容实现

【HTML5实践教程】7、 HTML5文字占位符placeholder的判断及跨浏览器兼容实现

时间:2012-11-24 14:48 点击:2442次 字体:[ ]




  html5为web的form表单增强了一个功能,他就是input的占位符--placeholder。占位符的作用是,当input内容为空或者没有被聚焦的时候,input显示占位符的内容。这是个很棒的功能,但不是所有的浏览器都支持。本教程将向你介绍,如何使用 Modernizr 类库去判断浏览器是否支持该属性,然后使用jquery动态显示占位符。

  demo预览地址:http://webdesignerwall.com/demo/html5-placeholder-text/

  demo下载地址:http://webdesignerwall.com/file/html5-placeholder.zip

 

  以前使用JavaScript实现的方式

  在没有placeholder属性的日子里,我们使用javascript去模拟他的实现。在下面的例子里,我们向input添加了一个value属性。input聚焦的时候,我们判断value的值是否是‘search’,是的话就清空内容。当input失去焦点的时候,我们判断内容是否为空,为空就将value设置为‘search’。

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

  使用jquery生成占位符

  现在使用html5的placeholder,从语义上来说,他比value属性更能表达我们的意图。但是不是所有浏览器都支持该属性,所以我们需要借助 Modernizr and jQuery 来帮助我们。

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

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

  1. <script src="jquery.js"></script>  
  2. <script src="modernizr.js"></script>  
  3.  
  4. <script>  
  5.   $(document).ready(function(){  
  6.     if(!Modernizr.input.placeholder){  
  7.       $('[placeholder]').focus(function() {  
  8.         var input = $(this);  
  9.         if (input.val() == input.attr('placeholder')) {  
  10.           input.val('');  
  11.           input.removeClass('placeholder');  
  12.         }  
  13.       }).blur(function() {  
  14.         var input = $(this);  
  15.         if (input.val() == '' || input.val() == input.attr('placeholder')) {  
  16.           input.addClass('placeholder');  
  17.           input.val(input.attr('placeholder'));  
  18.         }  
  19.       }).blur();  
  20.  
  21.       $('[placeholder]').parents('form').submit(function() {  
  22.         $(this).find('[placeholder]').each(function() {  
  23.           var input = $(this);  
  24.           if (input.val() == input.attr('placeholder')) {  
  25.             input.val('');  
  26.           }  
  27.       })  
  28.     });  
  29.   }  
  30. </script> 

  移出webkit搜索框样式

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

  1. input[type=search] {    -webkit-appearance: none;}  
  2.  
  3. input[type="search"]::-webkit-search-decoration,   
  4. input[type="search"]::-webkit-search-cancel-button {  
  5.     display: none;  

【HTML5实践教程】7、 HTML5文字占位符placeholder的判断及跨浏览器兼容实现 _www.fengfly.com

  好了,本节课程到此为止。

 

  原文地址:http://webdesignerwall.com/tutorials/cross-browser-html5-placeholder-text

  本文转自:http://www.cnblogs.com/softlover/archive/2012/11/24/2779878.html



本文地址 : http://www.fengfly.com/plus/view-210432-1.html
标签: HTML5 placeholder
------分隔线----------------------------
最新评论 查看所有评论
发表评论 查看所有评论
请自觉遵守互联网相关的政策法规,严禁发布色情、暴力、反动的言论。
评价:
表情:
验证码: