CODEWITHSUNDEEP
javascripthtmlcssautofill
Code Guru
Code Guru

Reputation: 15598

browser auto fill issue with input focus

I have a login form for which browser has saved the user login detail. So when I open this page in the browser it shows me like this enter image description here

but when I click on the page or press any button

enter image description here

this is the expected default behaviour.

I have tried 

document.body.focus()

onload but this is not working.

then I set focus on one of the input(on name) but then what about other field? what is the best solution for this?

I know this fancy styling is not good but is there workaround for this?

Upvotes: 4

Views: 2811

Answers (4)

Dangerdave
Dangerdave

Reputation: 51

$(window).on('load', function (){
    setTimeout(function() {
        $('input:-webkit-autofill').each(function (){
            $(this).parent().addClass('focused');
        });
    }, 500);
});
.form-group.focused .floating-label {
    color: #7b7f82;
    font-size: 12px;
    left: 14px;
    opacity: 1;
    top: 8px;
}
<div class="form-group floating-group">
<label class="floating-label">tel</label>
<input type="text" name="telefon" id="telefon">
</div>

Upvotes: 0

0llyds
0llyds

Reputation: 85

I had this exact issue using React and Styled Components. To resolve the issue I used the following css inside my styled component (which was a <label>):

input:-webkit-autofill + &

This works by checking for an autofill in the input and applying our desired styling if true.

Note: You may need to replace & with input.

Upvotes: 5

Murtaza Hussain
Murtaza Hussain

Reputation: 4315

You need to add active class to the elements in the Login form:

For example:

<input id="password" placeholder="Password" name="password" type="password" class="active">

or added the code snippet below to the css:

input:-webkit-autofill { +label { @extend .active; } } }`

Let me know if this worked, Thanks.

Upvotes: 0

Suraj Libi
Suraj Libi

Reputation: 515

Try this

.login-form{

  width: 50%;
  }

form div{
padding: 10px;
}

form div label, form div .fa{
color: blue;
}
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">


<form class="login-form text-center">
    <h4>Sign in</h4>

 
    <div class="md-form">
        <i class="fa fa-envelope prefix grey-text"></i>
          <label for="materialFormLoginEmailEx">Your email</label><br>
        <input type="email" id="materialFormLoginEmailEx" class="form-control" placeholder="Admin">
      
    </div>

  
    <div class="md-form">
        <i class="fa fa-lock prefix grey-text"></i>
        <label for="materialFormLoginPasswordEx">Your password</label><br>
        <input type="password" id="materialFormLoginPasswordEx" class="form-control" placeholder="Password">
        
    </div>

    <div class="login-btn">
        <button class="btn btn-default" type="submit">Login</button>
    </div>
</form>

Upvotes: 0

Related Questions