CODEWITHSUNDEEP
javascripthtmlcssgoogle-chromesafari
Ben Clarke
Ben Clarke

Reputation: 256

Password input field in Safari and Chrome

I have completed my application now in IE and everything was working fine, then I ran my application in Safari and Chrome and come across an issue where when I have a Input field of type Password the icon to display the password and the message box to inform the user Caps lock is on isn't there.

Now I know different browsers support different things and I was just wondering has anyone found anything that I can use or add to my code to get this to work?

Here is what I mean (IE):

enter image description here

This is now is Safari:

enter image description here

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

Upvotes: 2

Views: 3411

Answers (2)

mg_dev
mg_dev

Reputation: 1403

I understand what you mean. I too had this issue. Different browser render the password field differently. So I used this workaround:

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

And here is the code by @misterManSam for caps lock popup. 

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

});

I am using AngularJS and on click of that icon I am toggling the two field. Also both fields (text and password) are bound to same variable.

This worked for me. Hope it will help you too.

PS. Do your style for that CapsLock Popup div :)
All the best.

Upvotes: 2

misterManSam
misterManSam

Reputation: 24692

OK, so that caps lock warning is IE based. Didn't know that :)

A good solution would be to emulate this with jQuery and HTML/CSS.

This is a fiddle I found. Start typing in the password field with caps lock on to receive the warning.

This is the github page for the jQuery plugin.

Here is its simple implementation.

HTML

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

jQuery 

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

});

For the CSS, you can target #capsWarning and make it look however you want.

Upvotes: 1

Related Questions