禁用input自动补全，模拟type=password输入字符显示为星号

ゝ一世哀愁。 2022-11-13 04:12 460阅读 0赞

> 最近遇到一个想禁用浏览器的密码自动补全的功能，翻遍了整个技术论坛大多使用用auto-complete="new-password"但是本人测试不怎么管用，所有又找到了如下几种方法，特此记录

### 一、使用span 替换输入内容 ###

根据该地址[ input密码框输入后设置显示为星号或其他样式 ][input_] 做了一个模拟，

核心片段如下：

<template>
      <div class="text-input" :class="right ? 'textinput-right' : ''">
        <span
          v-if="star"
          class="pwd-txt"
          :style="right ? { paddingRight: '5px' } : { paddingLeft: '5px' }"
        >
          { {  passwordType === 'password' ? '*'.repeat(text.length) : text }}
        </span>
        <input
          ref="inputText"
          v-model="value"
          :style="[
            star ? '' : {  paddingLeft: '5px' },
            right ? {  textAlign: 'right' } : ''
          ]"
          :class="['text', className]"
          :type="type === 'number' ? 'tel' : 'text'"
          :placeholder="text ? '' : placeholder"
          :maxlength="maxlength"
          @keyup="handelKeyup"
        />
        <span v-show="text" class="show-pwd" @click="showPwd">
          <svg-icon
            :icon-class="passwordType === 'password' ? 'eye' : 'eye-open'"
          />
        </span>
        <el-button
          class="my-btn"
          icon="el-icon-unlock"
          :loading="unlockLoading"
          @click="unlock"
        ></el-button>
      </div>
    </template>

![在这里插入图片描述][20210325140723630.png]

### 二、使用text-security:disc ###

后来又根据这个[ js禁止chrome保存密码、更新密码][js_chrome]  
将上面的案例修改如下：

![在这里插入图片描述][20210325140958955.png]

最大的问题就是目前只有webkit内核可以，没办法兼容其他浏览器

瞧firefox—>  
![在这里插入图片描述][20210326135648211.png]

### 三、使用font-family: text-security-disc ###

最后：再stackoverflow发现了这个帖子[How to make input type=“tel” work as type=“password”][How to make input type_tel_ work as type_password]从中发训了一个使用[font-family: text-security-disc来达到效果][font-family_ text-security-disc]

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM0ODE3NDQw_size_16_color_FFFFFF_t_70]

安装以上的text-security

npm i -S text-security

或者直接index.html引用

最后又将上面片段改为：

最后整合上面几次修改，预览效果如下：

![demo][]

完整demo[请移步https://github.com/dengxiaoning/similar-input-password][https_github.com_dengxiaoning_similar-input-password]

[input_]: https://blog.csdn.net/weixin_30772105/article/details/97936030?utm_medium=distribute.pc_relevant.none-task-blog-BlogCommendFromMachineLearnPai2-3.control&dist_request_id=1328690.21028.16166516599901095&depth_1-utm_source=distribute.pc_relevant.none-task-blog-BlogCommendFromMachineLearnPai2-3.control
[20210325140723630.png]: /images/20221022/5bafa5ec65a44d55afebd0537fa653bd.png
[js_chrome]: https://www.jianshu.com/p/2788c925c431
[20210325140958955.png]: /images/20221022/4b7141b7e35e49f69d7b38a59cc551a5.png
[20210326135648211.png]: /images/20221022/61e05420586348a3aacda47a4b1e5177.png
[How to make input type_tel_ work as type_password]: https://stackoverflow.com/questions/36935576/how-to-make-input-type-tel-work-as-type-password/36950075#36950075
[font-family_ text-security-disc]: https://github.com/noppa/text-security
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM0ODE3NDQw_size_16_color_FFFFFF_t_70]: /images/20221022/28cccb8c543a48599df6a2bd5db2e845.png
[demo]: /images/20221022/d67b44a21c8144179f7908b3591a4b41.png
[https_github.com_dengxiaoning_similar-input-password]: https://github.com/dengxiaoning/similar-input-password