完美解决 element-ui input=password 在浏览器会自动填充密码的问题

<el-form-item label="用户名" prop="user_name">
        <el-input v-model="info.user_name" :disabled="updateFlag" auto-complete="off" name="person.user.user_name"></el-input>
      </el-form-item>
      <el-form-item label="厂商" prop="factory">
        <el-input v-model="info.factory" auto-complete="off" name="person.user.factory"></el-input>
      </el-form-item>
      <el-form-item label="密码" prop="password">
        <el-input v-model="info.password" :type="((newPwdReadOnly && info.password) || info.password)?'password':'text'" auto-complete="new-password" name="person.user.new_password" @focus="newPwdFocus($event)" :readonly="newPwdReadOnly" @blur="newPwdBlur($event)" ref="newPwdRef"></el-input>
      </el-form-item>
      <el-form-item label="确认密码" prop="confirmPwd">
        <el-input v-model="info.confirmPwd" :type="((rePwdReadOnly && info.confirmPwd) || info.confirmPwd)?'password':'text'" auto-complete="confirm-password" name="person.user.re_password" @focus="newPwdFocus($event, false)" :readonly="rePwdReadOnly" @blur="newPwdBlur($event, false)" ref="reNewPwdRef"></el-input>
      </el-form-item>

给各输入项加了auto-complete属性,只能避免保存的时候弹出是否保存密码弹框的问题。
内容为空的时候点击type="password"的input框或二次(多次)点击,还是会弹出密码框,所以在上面加了type在password和text之间切换(只能解决第一次多次点击的场景)。
具体解决,给type="password"的输入项增加focus,blur事件和readonly属性,具体focus, blur方法:

newPwdFocus(evt, isNew = true) {
      if (evt) {
        evt.stopPropagation();
        evt.preventDefault();
      }
      setTimeout(() => {
        if (isNew) {
          this.newPwdReadOnly = false;
        } else {
          this.rePwdReadOnly = false;
        }
      }, 100);
    },
    newPwdBlur(evt, isNew = true) {
      if (evt) {
        evt.stopPropagation();
      }
      if (isNew) {
        this.newPwdReadOnly = true;
      } else {
        this.rePwdReadOnly = true;
      }
    },

关键在于setTimeout 0的延时。
以上还不算完全解决,输入内容,再回车删除内容,发现自动填充框又出来了,所以需要watch以下:

 watch: {
    "info.password": function () {
      if (this.info.password === "") {
        this.newPwdReadOnly = true;
        this.newPwdFocus(null);
      }
    },
    "info.confirmPwd": function () {
      if (this.info.confirmPwd === "") {
        this.rePwdReadOnly = true;
        this.newPwdFocus(null, false);
      }
    }
  },

以上还不算完全解决,内容为空的时候点击type="password"的input框或二次(多次)点击,还是会弹出密码框。或者输入密码,回退清空再点击还是会弹出自动填充框。解决办法,加mousedown事件(注意不是keydown,也不是click)

addClickEvt() {
      if (this.$refs.newPwdRef) {
        this.$refs.newPwdRef.$refs.input.onmousedown =  (evt) => {
          if (evt) {
            evt.preventDefault();
            evt.stopPropagation();
          }
          if (this.info.password === "" || this.newPwdReadOnly) {
            this.$refs.newPwdRef.$refs.input.blur();
            setTimeout(() => {
              this.$refs.newPwdRef.$refs.input.focus();
            }, 0);
          }
          return false;
        };
      }
      if (this.$refs.reNewPwdRef) {
        this.$refs.reNewPwdRef.$refs.input.onmousedown =  (evt) => {
          if (evt) {
            evt.preventDefault();
            evt.stopPropagation();
          }
          if (this.info.confirmPwd === "" || this.rePwdReadOnly) {
            this.$refs.reNewPwdRef.$refs.input.blur();
            setTimeout(() => {
              this.$refs.reNewPwdRef.$refs.input.focus();
            }, 0);
          }
          return false;
        };
      }
    },

当点击(或多次点击)密码框的时候会触发mousedown事件,先失焦就阻止了自动填充框的弹出,再聚焦就实现了鼠标还在输入框的功能。
完美解决!
个人觉得实际直接绑定mousedown的处理逻辑应该就够了(没尝试)。

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 229,517评论 6 539
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 99,087评论 3 423
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 177,521评论 0 382
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 63,493评论 1 316
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 72,207评论 6 410
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 55,603评论 1 325
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 43,624评论 3 444
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 42,813评论 0 289
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 49,364评论 1 335
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 41,110评论 3 356
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 43,305评论 1 371
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 38,874评论 5 362
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 44,532评论 3 348
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 34,953评论 0 28
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 36,209评论 1 291
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 52,033评论 3 396
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 48,268评论 2 375

推荐阅读更多精彩内容

  • 一、表单基础知识 在 JavaScript 中,表单对应的是 HTMLFormElement 类型。 HTMLFo...
    LemonnYan阅读 952评论 0 3
  • 本节介绍各种常见的浏览器事件。 鼠标事件 鼠标事件指与鼠标相关的事件,主要有以下一些。 click 事件,dblc...
    许先生__阅读 2,476评论 0 4
  • 1、窗体 1、常用属性 (1)Name属性:用来获取或设置窗体的名称,在应用程序中可通过Name属性来引用窗体。 ...
    Moment__格调阅读 4,582评论 0 11
  • 事件源对象 event.srcElement.tagName event.srcElement.type 捕获释放...
    孤魂草阅读 899评论 0 0
  • 14.1 表单的基础知识 表单由 元素来表示,继承自HTMLElement类型,除具有HTML元素相同的默认属性外...
    Elevens_regret阅读 373评论 0 0