首页 > web前端 > html教程 > IE如何兼容placeholder属性_html/css_WEB-ITnose

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

WBOY
发布: 2016-06-24 11:34:34
原创
1269 人浏览过

在前端开发中,经常需要为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
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板