Javascript Safari和Chrome中的密码输入字段

我现在已经在

IE

中完成了我的应用程序，一切正常，然后我在Safari和Chrome中运行了我的应用程序，遇到了一个问题，当我有

密码类型的
输入字段时，显示密码的图标和通知用户Caps lock已打开的消息框不存在

现在我知道不同的浏览器支持不同的东西，我只是想知道有没有人找到我可以使用或添加到我的代码中的东西来让它工作

我的意思是：


现在是Safari：

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


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

<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>  

我正在使用AngularJS，点击该图标，我正在切换两个字段。
此外，这两个字段（文本和密码）都绑定到同一个变量

这对我有用。希望它也能帮助你

另外，为CapsLock弹出的div做你的风格：）

祝您一切顺利。
好的，这样caps lock警告就基于IE了。我不知道：）

一个好的解决方案是用jQuery和HTML/CSS来模拟这一点

。开始在“密码”字段中键入大写锁定以接收警告


下面是它的简单实现

HTML

对于CSS，您可以针对
#capswaring
并使其看起来像您想要的那样。
发布您的脚本并生成JSFIDLE我们需要提供此结果的javascript/CSS/html。我认为这是较新IE（10+）中的默认选项-有点旧，但是-@PawanLakhara我没有脚本，我只是有一个带有密码类型的输入框。我将用我使用的HTML编辑这个问题。@misterManSam我只使用了Type=“Password”我添加了HTML，但没有使用JS或CSS.Nice。我也想提醒你。。“显示密码的图标不存在。”因此，将您的代码添加到my one可以完成此回答。：）谢谢
$(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();  

});

<div id="form">
  username
  <input type="text" />
  <br>
  password
  <input type="password" name="Passwd" id="Passwd" />
  <div id="capsWarning" style="display:none;">Caps Lock is on.</div>
</div>

$(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();

});