兼容ie7以上的 placeholder属性

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

猿者上钩

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

阅读量131

点赞数 1

CC 4.0 BY-SA版权

文章标签： js ie 7

本文链接：https://blog.youkuaiyun.com/qq_28671617/article/details/70211414

本文提供了一种解决IE浏览器不支持HTML5 input元素placeholder属性的兼容性问题的方法。通过使用jQuery，为不支持placeholder的浏览器添加了自定义的占位符文本功能，确保了在所有浏览器中都能正确显示输入框提示。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

ie头疼的placeholder

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Document</title>
        <script src="http://s28.9956.cn/static/v3_1/js/jquery.min.js"></script>
    </head>
    <body>
        <input type="" class="clo1" placeholder="电话">
        <script type="text/javascript">//'代码保存成一个js文件引用即可。
            $(document).ready(function() {
                var doc = document,
                inputs = doc.getElementsByTagName('input'),
                supportPlaceholder = 'placeholder' in doc.createElement('input'),

                placeholder = function(input) {
                    var text = input.getAttribute('placeholder'),
                    defaultValue = input.defaultValue;
                    if (defaultValue == '') {
                        input.value = text
                    }
                    input.onfocus = function() {
                        if (input.value === text) {
                            this.value = ''
                        }
                    };
                    input.onblur = function() {
                        if (input.value === '') {
                            this.value = text
                        }
                    }
                };

                if (!supportPlaceholder) {
                    for (var i = 0,
                    len = inputs.length; i < len; i++) {
                        var input = inputs[i],
                        text = input.getAttribute('placeholder');
                        if (input.type === 'text' && text) {
                            placeholder(input)
                        }
                    }
                }
            });
        </script>
    </body>
</html>