IE9 javascript 问题的占位符脚本

Posted 2023-03-05

【中文标题】IE9 javascript 问题的占位符脚本

【英文标题】：Placeholder script for IE9 javascript issue

【发布时间】：2015-12-09 09:12:28

【问题描述】：

我有以下脚本，如果用户有浏览器 ie9，那么我们会修复关于 ie9 不支持占位符的已知问题：

       if (isIE9)  // ie9
            // this is html5 placeholder fix for inputs, inputs with placeholder-no-fix class will be skipped(e.g: we need this for password fields)
            jQuery('input[placeholder]:not(.placeholder-no-fix), textarea[placeholder]:not(.placeholder-no-fix)').each(function() 

                var input = jQuery(this);

                if (input.val() == '' && input.attr("placeholder") != '') 
                    input.addClass("placeholder").val(input.attr('placeholder'));
                

                input.focus(function() 
                    if (input.val() == input.attr('placeholder')) 
                        input.val('');
                    
                );

                input.blur(function() 
                    if (input.val() == '' || input.val() == input.attr('placeholder')) 
                        input.val(input.attr('placeholder'));
                    
                );
            );
        

当我在 ie9 中加载页面时，我看到了电子邮件框的占位符，但密码框已决定使用占位符并使其看起来像是有人输入了如下所示的值：

我的标记如下：

<div class="form-group">
   <input id="EmailAddress" class="form-control" type="text" value="" placeholder="Please enter your email address" name="EmailAddress" data-val-required="Email Address is required" data-val="true" autocomplete="off" maxlength="320">
</div>
<div class="form-group">
   <input id="Password" class="form-control" type="Password" value="" placeholder="Password" name="Password" data-val-required="Password is required" data-val="true" autocomplete="off" maxlength="50">
</div>

任何人都可以提出任何可以帮助我解决问题的建议吗？

我还在密码类中添加了 placeholder-no-fix，但是当在 ie9 中查看时，密码字段为空，它不显示占位符。

【参考方案1】：

您将密码字段的值 (.val()) 设置为字符串“Password”，它会将其视为密码并隐藏字符。

我想作为一个肮脏的黑客，您可以将输入类型设置为文本，直到他们关注该字段，然后将其设置为密码，直到该字段再次模糊为空（将其设置为文本显然不好如果他们的密码在那里！）。

【参考方案2】：

我建议你使用一个额外的位置：absolute; div 作为 IE 9 的后备占位符。只需显示/隐藏 div onblur。

使用 value 作为占位符会要求用户在填写字段之前删除所有内容，并且在密码字段中肯定会出现 ****** 问题。