vue实现禁止浏览器记住密码功能的示例代码

查找资料

网上查到的一些方法:

  • 使用 autocomplete="off"(现代浏览器许多都不支持)
  • 使用 autocomplete="new-password"
  • 在真正的账号密码框之前增加相同 name 的 input 框
  • 使用 readonly 属性,在聚焦时移除该属性
  • 初始化 input 框的 type 属性为 text,聚焦时修改为 password
  • 使用 type="text",手动替换文本框内容为星号 “*” 或者 小圆点 “●”

实现过程

用到的字段

data() {
 return {
   username: '',
    password: '',
  }
}

由于 autocomplete="off" 现代浏览器已经不支持,所以直接放弃了对密码框设置,直接使用 autocomplete="new-password" ,亲测Chrome(v88.0.4324.104)、edge(v88.0.705.56)及火狐(v67)可用,但火狐(v85)还是会提示记住密码。

<el-input v-model="username" type="text" name="text" placeholder="账号" autocomplete="off"><i slot="prefix" class="el-input_icon el-icon-user"></i></el-input>

<el-input v-model="password" type="password" name="pwd" id="pwd" placeholder="密码" autocomplete="new-password"></el-input>

参考:

https://developer.mozilla.org/zh-CN/docs/Web/Security/Securing_your_site/Turning_off_form_autocompletion

https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/autocomplete#browser_compatibility

在解决火狐高版本提示的过程中,试验了3/4/5的方法,结果都不如人意,但发现火狐浏览器只要最终密码框里的值为星号 “*” 或者小圆点 “●” 时,就不会提示记住密码(不知是否正确,可自行测试),于是新增字段 pwdCover 用于关联输入框,实际传值用 password。

templete

<el-input v-model="username" type="text" name="text" placeholder="账号" autocomplete="off"><i slot="prefix" class="el-input_icon el-icon-user"></i></el-input>

<el-input v-model="pwdCover" type="password" name="pwd" id="pwd" placeholder="密码" autocomplete="new-password"@input="setPassword"></el-input>
script
data() {
 return {
   username: '',
    password: '',
    pwdCover: '',
  }
},
method: {
 login() {
   this.pwdCover = this.pwdCover.replace(/\S/g, '●');
    // 登录请求,失败时恢复pwdCover
    this.pwdCover = this.password;
  },
  setPassword(val) {
   this.password = val;
  }
}

自信满满发给了项目上的同事,结果翻车了,现场环境:

  • 操作系统:Windows7、Windows10
  • 浏览器:Chrome v74.0.3729.108

我安装同版本的谷歌浏览器之后发现问题还是没有出现,而我的操作系统是 Windows10,不知是哪里出了问题,最终还是选择了方法6

最终

templete

<el-form-item>
 <el-input v-model="username" type="text" name="text" placeholder="账号" autocomplete="off"><i slot="prefix" class="el-input_icon el-icon-user"></i></el-input>
</el-form-item>
<el-form-item>
 <el-input v-model="pwdCover" type="text" name="pwd" id="pwd" placeholder="密码" autocomplete="off" @input="setPassword"><i slot="prefix" class="el-icon-lock"></i></el-input>
</el-form-item>

script

setPassword(val) {
  let reg = /[0-9a-zA-Z]/g; // 只允许输入字母和数字
  let nDot = /[^●]/g; // 非圆点字符
  let index = -1; // 新输入的字符位置
  let lastChar = void 0; // 新输入的字符
  let realArr = this.password.split(''); // 真实密码数组
  let coverArr = val.split(''); // 文本框显示密码数组
  let coverLen = val.length; // 文本框字符串长度
  let realLen = this.password.length; // 真实密码长度
  // 找到新输入的字符及位置
  coverArr.forEach((el, idx) => {
    if(nDot.test(el)) {
      index = idx;
      lastChar = el;
    }
  });
  // 判断输入的字符是否符合规范,不符合的话去掉该字符
  if(lastChar && !reg.test(lastChar)) {
    coverArr.splice(index, 1);
    this.pwdCover = coverArr.join('');
    return;
  }
  if (realLen < coverLen) {
    // 新增字符
    realArr.splice(index, 0, lastChar);
  } else if (coverLen <= realLen && index !== -1) {
    // 替换字符(选取一个或多个字符直接替换)
    realArr.splice(index, realLen - (coverLen - 1), lastChar);
  } else {
    // 删除字符,因为 val 全是 ● ,没有办法匹配,不知道是从末尾还是中间删除的字符,删除了几个,不好对 password 处理,所以可以通过光标的位置和 val 的长度来判断
    let pos = document.getElementById('pwd').selectionEnd; // 获取光标位置
    realArr.splice(pos, realLen - coverLen);
  }
  // 将 pwdCover 替换成 ●
  this.pwdCover = val.replace(/\S/g, '●');
  this.password = realArr.join('');
},

到此这篇关于vue实现禁止浏览器记住密码功能的示例代码的文章就介绍到这了,更多相关vue 禁止浏览器记住密码内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们!

(0)

相关推荐

  • 前端vue+elementUI如何实现记住密码功能

    我们这回使用纯前端保存密码 既然是记住密码,前端也就是使用cookie保存,访问时用cookie读取 先来了解下cookie的基本使用吧 Cookie 所有的cookie信息都在document.cookie中存放着,是一个字符串,里面的cookie以分号和空格分隔.就像这样: "key1=value1; key2=value2; key3=value3" // 使用document.cookie 来获取所有cookie docuemnt.cookie = "id="

  • vue中使用cookies和crypto-js实现记住密码和加密的方法

    使用crypto-js加解密 第一步,安装 npm install crypto-js 第二步,在你需要的vue组件内import import CryptoJS from "crypto-js"; 第三步,使用 // Encrypt 加密 var cipherText = CryptoJS.AES.encrypt( "my message", "secretkey123" ).toString(); console.log(cipherText

  • vue中使用sessionStorage记住密码功能

    sessionStorage和localStorage比较 二者区别 sessionStorage用于本地存储一个会话(session)中的数据,这些数据只有在同一个会话中的页面才能访问并且当会话结束后数据也随之销毁.因此sessionStorage不是一种持久化的本地存储,仅仅是会话级别的存储. localStorage用于持久化的本地存储,除非主动删除数据,否则数据是永远不会过期的. localStorage和sessionStorage操作 localStorage和sessionStor

  • Vue+element+cookie记住密码功能的简单实现方法

    实现功能: 1.登录时勾选记住密码,用cookie保存账号和密码并对密码进行两次加密处理(纯前端),下次登录自动输入账号密码 2.登录时不勾选,清空cookie,下次登录需要输入 效果图: ===========================================================================================================================================================

  • vue项目实现记住密码到cookie功能示例(附源码)

    本文介绍了vue项目实现记住密码到cookie功能示例,分享给大家,具体如下: 登陆页面 实现功能: 1.记住密码勾选,点登陆时,将账号和密码保存到cookie,下次登陆自动显示到表单内 2.不勾选,点登陆时候则清空之前保存到cookie的值,下次登陆需要手动输入 大体思路就是通过存/取/删cookie实现的:每次进入登录页,先去读取cookie,如果浏览器的cookie中有账号信息,就自动填充到登录框中,存cookie是在登录成功之后,判断当前用户是否勾选了记住密码,如果勾选了,则把账号信息存

  • vue实现禁止浏览器记住密码功能的示例代码

    查找资料 网上查到的一些方法: 使用 autocomplete="off"(现代浏览器许多都不支持) 使用 autocomplete="new-password" 在真正的账号密码框之前增加相同 name 的 input 框 使用 readonly 属性,在聚焦时移除该属性 初始化 input 框的 type 属性为 text,聚焦时修改为 password 使用 type="text",手动替换文本框内容为星号 "*" 或者

  • JAVA记住密码功能的实现代码

    准备:SSM框架,mysql数据库 用户表 user 实体类: public class User { /** * 主键id */ private Integer userId; /** * 账号 */ private String username; /** * 密码 */ private String password; public Integer getUserId() { return userId; } public void setUserId(Integer userId) {

  • Android实现显示和隐藏密码功能的示例代码

    在前端中我们知道用javascript就可以可以很容易实现,那么在Android中怎么实现这个功能呢? Java代码 package com.example.test2; import androidx.appcompat.app.AppCompatActivity; import android.os.Bundle; import android.text.method.HideReturnsTransformationMethod; import android.text.method.Pa

  • asp.net中使用cookie与md5加密实现记住密码功能的实现代码

    在做一个前台的登陆和后台的信息审核管理功能时,需要用到记住密码的模块:虽然.net内置了登陆控件,有记住密码的功能,但还是想自己实践一下,以下代码主要应用了COOKIE,包括安全加密的过程等. 复制代码 代码如下: //设置,删除Cookie//provider jb51.net        protected void set_cookie()        {            HttpCookie UserNameCookie = Request.Cookies["UserNameC

  • vue实现pdf文件发送到邮箱功能的示例代码

    需求: vue实现pdf文件发送到邮箱功能 <!-- 弹窗 --> <van-popup v-model="showEmail" closeable class="contactTel" :close-on-click-overlay="false" @close="closeEmail"> <div class="popup-header fontSize36"> 发送

  • jquery.cookie.js 操作cookie实现记住密码功能的实现代码

    复制代码 代码如下: //初始化页面时验证是否记住了密码 $(document).ready(function() { if ($.cookie("rmbUser") == "true") { $("#rmbUser").attr("checked", true); $("#user").val($.cookie("userName")); $("#pass").va

  • Android开发笔记SQLite优化记住密码功能

    本文实例为大家分享了Android SQLite优化记住密码功能的具体代码,供大家参考,具体内容如下 package com.example.alimjan.hello_world; /** * Created by alimjan on 7/4/2017. */ import com.example.alimjan.hello_world.bean.UserInfo; import com.example.alimjan.hello_world.dataBase.UserDBHelper; i

  • vue实现键盘输入支付密码功能

    本文实例为大家分享了vue实现键盘输入支付密码功能的具体代码,供大家参考,具体内容如下 支付密码功能界面如下图: 主要代码如下: <template> <div class="pay-tool"> <div class="pay-tool-title border-bottom"> <span class="icon icon-back" @click="backHandle">

随机推荐