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

WBOY
發布: 2016-06-24 11:34:34
原創
1244 人瀏覽過

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

來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板