你的位置:首页 > 网页设计

[网页设计]IE如何兼容placeholder属性


在前端开发中,经常需要为input设置placeholder属性,但是placeholder是HTML5新属性,在IE10以下不兼容,那么如何完美兼容呢?

网上搜索了一下,其实也挺简单的,可以采用以下方法:

<script type="text/javascript">  if (!('placeholder' in document.createElement('input'))) {    $('input[placeholder],textarea[placeholder]').each(function() {      var that = $(this),        text = that.attr('placeholder');      if (that.val() === "") {        that.val(text).addClass('placeholder');      }      that.focus(function() {        if (that.val() === text) {          that.val("").removeClass('placeholder');        }      }).blur(function() {        if (that.val() === "") {          that.val(text).addClass('placeholder');        }      }).closest('form').submit(function() {        if (that.val() === text) {          that.val('');        }      });    });  }<script>

  这段代码很容易理解,但是用的时候发现对type=password类型不支持,于是继续搜索直到有了JPlaceHolder.js,感觉很不错,用起来也很简单

<!DOCTYPE html><html><head>  <meta charset="utf-8">  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">  <title>Examples</title>  <meta name="description" content="">  <meta name="keywords" content=""></head><body>  <input type="password" placeholder="密码">  <script src="http://apps.bdimg.com/libs/jquery/1.9.1/jquery.min.js"></script>  <script src="JPlaceHolder.js"></script></body></html>

  下载地址:JPlaceHolder.js