IE如何兼容placeholder属性_html/css_WEB-ITnose-HTML Tutorial-php.cn

IE如何兼容placeholder属性_html/css_WEB-ITnose

WBOY

Release： 2016-06-24 11:34:34

Original

1270 people have browsed it

在前端开发中，经常需要为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>

Copy after login

　　这段代码很容易理解，但是用的时候发现对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>

Copy after login

　　下载地址：JPlaceHolder.js