Level 60
This can be disabled or enabled inside Browser's settings, for example on Firefox:
about:preferences#privacy -> Passwords -> Fill usernames and passwords automatically
Jan 23, 2025
17
Level 1
How to prefill the login form with browser's memorized values?
I use Laravel 11 and vuejs3. At the moment when displaying the login form, the fields are empty despite the fact that the browser has memorized the credentials. When I type the first letter of the email, memorized previous entered values are displayed under the field and I can pick the right one with mouse click. The same for password. How can I retrieve these 2 values in order to pre-fill the form ?
Level 1
Thank you for reply. I already have this enabled but nothing is filled in the fields.
Level 60
@Meaulnes I believe in case you have more than one passwords saved, then the browser doesn't know which one to auto fill, try to remove all saved passwords and leave just one, and in this case your fields should be populated, https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/autocomplete
Level 1
@Sergiu17 It doesn't seem to populate the field even with only one candidate.
Level 122
its a browser feature. nothing you can influence from your code.
1 like
Level 1
@Snapey Why on earth this works on every other sites I visit ?
Level 80
@meaulnes You need to add an autocomplete attribute with the relevant value to tell the browser what information you’re expecting in that field.
So, for a login form, you’d need to use username and current-password:
<label for="email">Email</label>
<input autocomplete="username" id="email" name="email" type="email">
<label for="password">Password</label>
<input autocomplete="current-password" id="password" name="password" type="password">
Note it should be “username” (and not say, “email”). It’s a poor choice of name, but it essentially means the identifier (i.e. screen name, email address, etc) used for logging in. You would use email if you wanted to pre-fill the visitor’s email address from their contact card, i.e. in a newsletter sign-up form.
Level 1
@martinbean I am using v-text-field with v-model like this:
<v-text-field type="email" v-model="email" :rules="[isValidEmail]" label="Adresse électronique (email)" name="email" id="email" clearable></v-text-field>
<v-text-field v-show="!showResetForm" :append-icon="showPassword ? 'mdi-eye' : 'mdi-eye-off'"
:type="showPassword ? 'text' : 'password'" v-model="password" :readonly="loading" :rules="[]" name="password" id="password" label="Mot de passe"
placeholder="Entrez votre mot de passe" clearable @click:append="showPassword = !showPassword"></v-text-field>
<br />
How to adapt ?
Level 80
@Meaulnes Have you tried adding the autocomplete attributes, like I suggested? 🤷♂️
Level 122
@Meaulnes if your view model is bound to the field, then when vue starts it will probably set the form field to whatever you initialised the bound attribute to in vue code
Level 1
@martinbean Yes I dit but it doesn't work.
Level 1
@Snapey Yes sure. But how to get the memorized values to initialize the model ? May be I should not initialize?
Level 122
@Meaulnes if you disable vue does the form get filled?
Level 1
@Snapey What do you mean by "disable vue"?
Level 80
@Meaulnes Are you using Vuetify here?
Level 40
<input type="email" id="email" name="email" autocomplete="username" placeholder="Enter email" v-model="userEmail">
<input type="password" id="password" name="password" autocomplete="current-password" placeholder="Enter password" v-model="userPassword">
<button type="submit">Login</button>
</form>
Level 102
Is the webpage running https ?
1 like
Please or to participate in this conversation.