Safari和Chrome中的密码输入字段

debugcn 发表于 Dev

本·克拉克（Ben Clarke）

我现在已经完成了我的应用程序，IE并且一切正常，然后我在Safari和Chrome中运行了我的应用程序，遇到了一个问题，当我Input field输入Password的图标来显示密码和消息框来通知用户大写锁定时，不在那里。

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

这是我的意思（IE）：

在此处输入图片说明

现在是Safari：

在此处输入图片说明

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

曼尼什·古普塔（Manish Gupta）

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

<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，单击该图标，便会切换两个字段。同样，两个字段（文本和密码）都绑定到相同的变量。

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

PS。为CapsLock Popup div设置风格：)
一切顺利。

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。