javascript - Safari 和 Chrome 中的密码输入字段

Question

我现在已经在 IE 完成了我的申请一切正常，然后我在 Safari 和 Chrome 中运行我的应用程序并遇到一个问题，当我有一个 Input field类型 Password显示密码的图标和通知用户大写锁定已打开的消息框不存在。

现在我知道不同的浏览器支持不同的东西，我只是想知道是否有人找到了我可以使用或添加到我的代码中以使其正常工作的东西？

这就是我的意思(IE):

现在是 Safari:

<%-- Password Input --%>
<input runat="server" id="txt_password" class="InputBoxLoginPage" type="password" placeholder="Password..." />

Answer 1

我明白你的意思。我也有这个问题。不同的浏览器呈现不同的密码字段。所以我使用了这个解决方法:

<div class="well_head" style="height: 36px;">  
    <input type="text" class="password" style="border: 0px; float: right; padding-left: 30px;" />  
    <input type="password" class="password" style="border: 0px; float: right; padding-left: 30px;" />  
    <i class="icon-password" style="float: left; margin-top: 4px;"></i>  
</div>
<div id="capsWarning" style="display:none;">Caps Lock is on.</div>  

这是@misterManSam 为大写锁定弹出窗口编写的代码。

$(document).ready(function() {  

    /*   
    * Bind to capslockstate events and update display based on state   
    */  
    $(window).bind("capsOn", function(event) {  
        if ($("#Passwd:focus").length > 0) {  
            $("#capsWarning").show();  
        }  
    });  
    $(window).bind("capsOff capsUnknown", function(event) {  
        $("#capsWarning").hide();  
    });  
    $("#Passwd").bind("focusout", function(event) {  
        $("#capsWarning").hide();  
    });  
    $("#Passwd").bind("focusin", function(event) {  
        if ($(window).capslockstate("state") === true) {  
            $("#capsWarning").show();  
        }  
    });  

    /*   
    * Initialize the capslockstate plugin.  
    * Monitoring is happening at the window level.  
    */  
    $(window).capslockstate();  

});

我正在使用 AngularJS，单击该图标我将切换这两个字段。此外，两个字段(文本和密码)都绑定(bind)到相同的变量。

这对我有用。希望对您也有帮助。

附言。为那个 CapsLock Popup div 做你的风格 :)
一切顺利。