In The Chrome browser, if the browser has saved the user name and password of a web page, when you click the password input box, the following dropdown dialog box is displayed:

It is observed that when type= ‘password’ in the input box, this drop-down box will be displayed, which is a friendly reminder of the password box in the browser array.

The requirement is to hide the drop-down box and not show it. Try it one by one by referring to many methods. Next, three methods are introduced to solve this problem:

The first kind of

For easy operation, save the function to display the user name and password in plaintext or encryption, the code is as follows:

The Template:

<el-form-item label=" password" prop="userPassword"> < EL-input V-model ="formData. UserPassword "auto-complete="new-password" Class ="userPassword" type="text" placeholder=" @input="changeInputValue()"> < I :class="changeShowIcon" slot="suffix" @click="changeShow"></i> </el-input> </el-form-item>Copy the code

JS:

Data () {return {changeShowIcon: 'el-icon-view', // the plaintext display and the * display of the password input box on the right icon style aflag: true, // whether encryption display formData: ChangeShow () {this.aflag =! ChangeShow () {this.aflag =! Enclosing aflag if (this. Aflag = = = true) {/ / encryption enclosing formData. UserPassword = this. FormData. UserPassword. Replace (/. / g, '*') / / content of the input box to * this changeShowIcon = 'el - icon - view} else {/ / clear this. FormData. UserPassword = this.formData.savePassword this.changeShowIcon = 'el-icon-circle-close' } }, ChangeInputValue () {const value = this. FormData. UserPassword / / input to obtain the value of input boxes enclosing formData. SavePassword + = Value. Substr (value. Length -1, 1) // Get the last character to add to STR, because except for the last character, Other have to * if (this. Aflag = = = true) {this. FormData. UserPassword = value. The replace (/. / g, '*')} / / when encryption display content of the input box to *}Copy the code

Display result:

When a password is displayed in clear text:

Data obtained:

To measure the bug:

An error occurs in the saved plaintext field when modifying the input character is deleted while typing.

Bug example:

After testing, this method is compatible with IE, temporarily did not think of dealing with this bug method, temporarily save this idea.

The second,

When initializing the page, set type to text in the input field. When clicking the icon on the right, you can set type to password.

The code is as follows:

The Template:

<el-form-item label=" password" prop="userPassword"> < EL-input V-model ="formData. UserPassword "auto-complete="new-password" Class ="userPassword" :type="userPasswordType" placeholder=" slot="suffix" @click="changeShow"></i> </el-input> </el-form-item>Copy the code

JS:

Data () {return {userPasswordType: 'text', // Set the type of input box changeShowIcon: 'el-icon-view', // input block chart style aflag: }} changeShow() {this.aflag =! This. Aflag if (this.aflag === true) {// Plaintext this.userPasswordType = 'text' this.changeShowIcon = 'el-icon-view' // Else {// Encrypt display this.userPasswordType = 'password' this.changeShowIcon = 'el-icon-circles-close'}}Copy the code

Display result:

Clear:

Encryption:

To measure the bug:

This method just handles the popup that is displayed at the beginning of the page and will be displayed later, so keep that in mind for now.

The third kind of

Refer to several solutions, know the principle of Chrome password filling is to find the same name password box to fill, so do not need to remember the password page put a name and login the same input box, above the password box and the real password input box the same name input box, And set display: None, or make it invisible with location, and the browser’s ability to remember passwords will be disabled.

The code is as follows:

The Template:

<input type="password" name="password" style="position: absolute; left: -10000px;" > <el-form-item label=" password "prop="userPassword"> <el-input V-model ="formData. UserPassword" auto-complete="off" > </el-input> </el-form-item> </el-form-item>Copy the code

Pro test can solve the problem, but the test personnel computer display still failed, a little helpless, decided to shelve.

Refer to the link

Blog.csdn.net/weixin_4304…