Do background management system, after login browser will pop-up box prompt whether to remember the password, and it remembers the password after the next input password will automatically fill, very annoying, here to do a password input box component, prevent the browser to remember the password

This problem can be solved because the browser remembers the password for an input with text=”password”, and the custom input does not carry this attribute, but converts the password to a special character.

Step one, create onePwInput.vueAs a component, the code inside is as follows

<template> <! ElemntUI = elemntUI; elmentUI = elemntUI; elmentUI = elemntUI;<div class="pw_input_cp el-input">
        <input 
            class="el-input__inner"
            placeholder="Please enter your password" 
            ref="input"
            @input="handleInput"
            @compositionstart="handleCompositionStart"
            @compositionend="handleCompositionEnd"/>
    </div>
</template>

<script>
// Customize the password input box
// Input element cursor manipulation
class CursorPosition{ 
    constructor(_inputEl) {
        this._inputEl = _inputEl;
    } 
    // Get the cursor position before, after, and middle characters
    get(){  
        var rangeData = { text: "".start: 0.end: 0 };  
        if (this._inputEl.setSelectionRange) { // W3C      
            this._inputEl.focus();  
            rangeData.start = this._inputEl.selectionStart;  
            rangeData.end = this._inputEl.selectionEnd; rangeData.text = (rangeData.start ! = rangeData.end) ?this._inputEl.value.substring(rangeData.start, rangeData.end) : "";  
        } else if (document.selection) { // IE  
            this._inputEl.focus();  
            var i,  
                oS = document.selection.createRange(),  
                oR = document.body.createTextRange();  
            oR.moveToElementText(this._inputEl);  

            rangeData.text = oS.text;  
            rangeData.bookmark = oS.getBookmark();  
            for (i = 0; oR.compareEndPoints('StartToStart', oS) < 0 && oS.moveStart("character", -1)! = =0; i++) {  
                if (this._inputEl.value.charAt(i) == '\r') {  
                    i++;  
                }  
            }  
            rangeData.start = i;  
            rangeData.end = rangeData.text.length + rangeData.start;  
        }  

        return rangeData;  
    } 
    // Write the cursor position
    set(rangeData){  
        var oR;  
        if(! rangeData) { alert("You must get cursor position first.")}this._inputEl.focus();  
        if (this._inputEl.setSelectionRange) { // W3C  
            this._inputEl.setSelectionRange(rangeData.start, rangeData.end);  
        } else if (this._inputEl.createTextRange) { // IE  
            oR = this._inputEl.createTextRange();  
            if (this._inputEl.value.length === rangeData.start) {  
                oR.collapse(false);  
                oR.select();  
            } else{ oR.moveToBookmark(rangeData.bookmark); oR.select(); }}}}export default { 
    name: 'Pw_input_cp'.props: {value: {type:String.default:"",}},data(){
        return{
            symbol:"✘".// Custom password symbol
            pwd:"".// Password data in plain text
            inputEl:null./ / input element
            isComposing:false.// Whether the input box is still being entered (record whether the input box is virtual text or determined text)
        };
    },
    mounted(){
        this.inputEl = this.$refs.input;
    },
    watch: {value(){
            this.pwd = this.value;
            this.inputDataConversion(this.pwd); }},methods: {inputDataConversion(value){ // Convert 123 to *** in the input box
            if(! value)return;
            let data = "";
            for(let i=0; i<value.length; i++){ data+=this.symbol;
            }
            this.inputEl.value = data;
        },
        pwdSetData(positionIndex,value){ // Write raw data
            let _pwd = value.split(this.symbol).join("");
            if(_pwd){
                let index = this.pwd.length - (value.length - positionIndex.end);
                this.pwd = this.pwd.slice(0,positionIndex.end-_pwd.length) + _pwd + this.pwd.slice(index);
            }else{
                this.pwd = this.pwd.slice(0,positionIndex.end) + this.pwd.slice(positionIndex.end+this.pwd.length - value.length); }},handleInput(e){ // Execute after the input value changes
            // No input should be sent while writing
            if (this.isComposing) return;
            let cursorPosition = new CursorPosition(this.inputEl);
            let positionIndex = cursorPosition.get();
            let value = e.target.value; // The value of the entire input box
            this.pwdSetData(positionIndex,value);
            this.inputDataConversion(value);
            cursorPosition.set(positionIndex,this.inputEl);
            this.$emit("input".this.pwd);
        },
        handleCompositionStart() {
            // Indicates writing
            this.isComposing = true;
        },
        handleCompositionEnd(e) {
            if (this.isComposing) {
                this.isComposing = false;
                //handleCompositionEnd is running later than handleInput to prevent handleInput from executing proper logic while isComposing is true
                this.handleInput(e); }}},}</script>

<style scoped lang="scss">
.pw_input_cp{
    width: 100%;
}
</style>
Copy the code

Use references where they are needed (vUE uses components without further ado)

<PwInput
    v-model="password">
</PwInput>
Copy the code

DEMO, here the password input box is used in this way

The original address

It is the first time to write an article on nuggets. It is not even written. It is to share the components written by myself with everyone and publish them on multiple platforms, hoping to help everyone