解决HTML5 Placeholder兼容性的方案

最新推荐文章于 2022-09-19 07:36:59 发布

不吃鱼的猫咪

最新推荐文章于 2022-09-19 07:36:59 发布

阅读量769

点赞数

分类专栏：网页设计文章标签： html5 Placeholde

网页设计专栏收录该内容

32 篇文章 0 订阅

订阅专栏

使浏览器支持Placeholder有很多方法，都不是很完美，或多或少有点问题，且有些原生支持的浏览器在获得焦点时会清空Placeholder提示。发现知乎网的解决方法不错，特记录下。
windows系统中以下浏览器测试通过:Google Chrome 18,Firefox 12,IE 9,IE 6,Opera 11.5。在android 4.0系统也测试了下，原生浏览器及Opera Mobile12基本通过，缺陷是获得焦点时会清空Placeholder提示。
jquery.placeholder.zhihu.js：

/* 
* html5 placeholder pollfill 
* - 使用绝对定位内嵌层 
* - 也适用于密码域 
* 目标浏览器: IE 6~9, FF 3.5 
 // 默认 
$('input[placeholder]').placeholder() 
// autofocus 与 placeholder 搭配时，非 webkit 清空了提示文本，推荐 
$('input[placeholder]').placeholder({ 
  // 将删除原有 placehodler 属性，强制用 JS 实现替代 
  useNative: false, 
  // focus 时不清除提示文本， keypress 有效字符时才清空 
  hideOnFocus: false, 
  // 附加样式 
  style: { 
    textShadow: 'none' 
  } 
}) 
*/ 
(function ($) { 
  var attr = 'placeholder', nativeSupported = attr in document.createElement('input') 

  $.fn.placeholder = function (options) { 
    return this.each(function () { 
      var $input = $(this) 

      if ( typeof options === 'string' ) { 
        options = { text: options } 
      } 

      var opt = $.extend({ 
        text     : '', 
        style    : {}, 
        namespace: 'placeholder', 
        useNative: true, 
        hideOnFocus: true 
      }, options || {}) 

      if ( !opt.text ) { 
        opt.text = $input.attr(attr) 
      } 

      if (!opt.useNative) { 
        $input.removeAttr(attr) 
      }else if ( nativeSupported ) { 
        // 仅改变文本 
        $input.attr(attr, opt.text) 
        return 
      } 

      var width     = $input.width(), height = $input.height() 
      var box_style = ['marginTop', 'marginLeft', 'paddingTop', 'paddingLeft', 'paddingRight'] 

      var show      = function () { $layer.show() } 
      var hide      = function () { $layer.hide() } 
      var is_empty  = function () { return !$input.val() } 
      var check     = function () { is_empty() ? show() : hide() } 

      var position  = function () { 
        var pos = $input.position() 
        if (!opt.hideOnFocus) { 
          // 按鍵隱藏的情况，需要移動光標两像素 
          pos.left += 2 
        } 
        $layer.css(pos) 
        $.each(box_style, function (i, name) { 
          $layer.css(name, $input.css(name)) 
        }) 
      } 

      var layer_style = { 
          color     : 'gray', 
          cursor    : 'text', 
          textAlign : 'left', 
          position  : 'absolute', 
          fontSize  : $input.css('fontSize'), 
          fontFamily: $input.css('fontFamily'), 
          display   : is_empty() ? 'block' : 'none' 
      } 

      // create 
      var layer_props = { 
        text  : opt.text, 
        width : width, 
        height: 'auto' 
      } 

      // 确保只绑定一次 
      var ns = '.' + opt.namespace, $layer = $input.data('layer' + ns) 
      if (!$layer) { 
        $input.data('layer' + ns, $layer = $('<div>', layer_props).appendTo($input.offsetParent()) ) 
      } 

      // activate 
      $layer 
      .css($.extend(layer_style, opt.style)) 
      .unbind('click' + ns) 
      .bind('click' + ns, function () { 
        opt.hideOnFocus && hide() 
        $input.focus() 
      }) 

      $input 
      .unbind(ns) 
      .bind('blur' + ns, check) 

      if (opt.hideOnFocus) { 
        $input.bind('focus' + ns, hide) 
      }else{ 
        $input.bind('keypress keydown' + ns, function(e) { 
          var key = e.keyCode 
          if (e.charCode || (key >= 65 && key <=90)) { 
            hide() 
          } 
        }) 
        .bind('keyup' + ns,check) 
      } 

      // 由于 ie 记住密码的特性，需要监听值改变 
      // ie9 不支持 jq bind 此事件 
      $input.get(0).onpropertychange = check 

      position() 
      check() 
    }) 
  } 

})(jQuery)

Demo:

<!DOCTYPE html> 
<html lang="en"> 
<head> 
<meta charset="utf-8"> 
<!--[if lt IE 9]> 
<script src="js/html5shiv.js"></script> 
<![endif]--> 
<title>HTML5 placeholder jQuery Plugin</title> 
<style> 
     body, input, textarea { font: 1em/1.4 Helvetica, Arial; } 
     label code { cursor: pointer; float: left; width: 150px; } 
     input { width: 14em; } 
     textarea { height: 5em; width: 20em; } 
     .placeholder { color: #aaa; } 
     .note { border: 1px solid orange; padding: 1em; background: #ffffe0; }    
</style> 
</head> 
<body> 
     <h1>HTML5 Placeholder jQuery Plugin</h1>     
     <form id="test"> 
     <p><label><code>type=search</code> <input type="search" name="search" placeholder="Search this site…" autofocus></label></p> 
     <p><label><code>type=text</code> <input type="text" name="name" placeholder="e.g. John Doe"></label></p> 
     <p><label><code>type=email</code> <input type="email" name="email" placeholder="e.g. address@example.ext"></label></p> 
     <p><label><code>type=url</code> <input type="url" name="url" placeholder="e.g. http://mathiasbynens.be/"></label></p> 
     <p><label><code>type=tel</code> <input type="tel" name="tel" placeholder="e.g. +32 472 77 69 88"></label></p> 
     <p><label for="p"><code>type=password</code> </label><input type="password" name="password" placeholder="e.g. hunter2" id="p"></p> 
     <p><label><code>textarea</code> <textarea name="message" placeholder="Your message goes here"></textarea></label></p> 
     <p><input type="submit" value="type=submit"></p> 
     </form> 
     <script src="js/jquery-1.7.2.min.js"></script>     
     <script src="js/jquery.placeholder.zhihu.js"></script> 
     <script> 
          $(function(){               
               var support = (function(input) { 
                    return function(attr) { return attr in input } 
               })(document.createElement('input'))          
               if ( !(support('placeholder') && $.browser.webkit) ) {               
                    $('input[placeholder],textarea[placeholder]').placeholder({ 
                         useNative: false,  
                         hideOnFocus: false,  
                         style: {  
                              textShadow: 'none'  
                         }  
                    }); 
               } 

               if ( !support('autofocus') ) { 
                    $('input[autofocus]').focus() 
               } 
          }); 
     </script> 
</body> 
</html>

转载自： http://xyly624.blog.51cto.com/842520/864959

不吃鱼的猫咪

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
解决HTML5 Placeholder兼容性的方案

使浏览器支持Placeholder有很多方法，都不是很完美，或多或少有点问题，且有些原生支持的浏览器在获得焦点时会清空Placeholder提示。发现知乎网的解决方法不错，特记录下。 windows系统中以下浏览器测试通过:Google Chrome 18,Firefox 12,IE 9,IE 6,Opera 11.5。在android 4.0系统也测试了下，原生浏览器及Opera M
复制链接

扫一扫

专栏目录