IE如何兼容placeholder属性

最新推荐文章于 2024-05-11 13:07:04 发布

我爱丁丁猫

最新推荐文章于 2024-05-11 13:07:04 发布

阅读量158

点赞数

分类专栏：前端文章标签： html css

原文链接：https://www.mk2048.com/blog/blog.php?id=hiijcka2ikaa&title=IE%E5%A6%82%E4%BD%95%E5%85%BC%E5%AE%B9placeholder%E5%B1%9E%E6%80%A7

版权

前端专栏收录该内容

1898 篇文章 4 订阅

订阅专栏

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

更多专业前端知识，请上【猿2048】www.mk2048.com

我爱丁丁猫

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
IE如何兼容placeholder属性

在前端开发中，经常需要为input设置placeholder属性，但是placeholder是HTML5新属性，在IE10以下不兼容，那么如何完美兼容呢？网上搜索了一下，其实也挺简单的，可以采用以下...
复制链接

扫一扫