HTML：IE9及9以下浏览器兼容placeholder（包含密码输入框）

最新推荐文章于 2021-07-06 10:48:58 发布

Siimple

最新推荐文章于 2021-07-06 10:48:58 发布

阅读量579

点赞数

分类专栏：前端文章标签： placeholder IE9

前端专栏收录该内容

6 篇文章 0 订阅

订阅专栏

1.使用

HTML文件中：

<!doctype html>
<html>
<head>
    <title></title>
    <script src="jquery.min.js"></script>
    <!--[if lte IE 9]>
        <script src="0/css/ite-ie9.js"></script>
    <![endif]-->
</head>

<body>
</body>
</html>

IE 9 及9以下版本的浏览器应用。

2.详细代码

保存为单独 js 文件：ite-ie9.js

$(function(){
    if( !('placeholder' in document.createElement('input')) ){
        // 匹配 除type=password以外所有input、textarea
        $('input[placeholder][type!=password],textarea[placeholder]').each(function(){   
            var self = $(this),   
            text= self.attr('placeholder');
            // 如果内容为空，则写入
            if(self.val()===""){ 
                self.val(text).addClass('placeholder');
            }

            // 控件激活，清空placeholder
            self.focus(function(){
                if(self.val()===text){
                    self.val("").removeClass('placeholder');
                }
            // 控件失去焦点，清空placeholder
            }).blur(function(){
                if(self.val()===""){
                    self.val(text).addClass('placeholder');
                }
            }); 

            //对password框的特殊处理
            $("input[type='password']").each(function() {
                //1.创建一个text框 2获取焦点和失去焦点的时候切换
                var pwdField    = $(this);
                var pwdVal      = pwdField.attr('placeholder');
                pwdField.after('<input  class="login-input-ie" type="text" value='+pwdVal+' autocomplete="off" />');
                var pwdPlaceholder = $(this).siblings('.login-input-ie');
                pwdPlaceholder.show();
                pwdField.hide();

                pwdPlaceholder.focus(function(){
                    pwdPlaceholder.hide();
                    pwdField.show();
                    pwdField.focus();
                });

                pwdField.blur(function(){
                    if(pwdField.val() == '') {
                        pwdPlaceholder.show();
                        pwdField.hide();
                    }
                });
            });
        });   
    }
})();

Siimple

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
HTML：IE9及9以下浏览器兼容placeholder（包含密码输入框）

1.使用HTML文件中：&lt;!doctype html&gt;&lt;html&gt;&lt;head&gt; &lt;title&gt;&lt;/title&gt; &lt;script src="jquery.min.js"&gt;&lt;/script&gt; &lt;!--[if lte IE 9]&gt;
复制链接

扫一扫

专栏目录