快捷導(dǎo)航

基于Vue3+TypeScript實(shí)現(xiàn)防止支付密碼被瀏覽器保存功能

更新時(shí)間：2025年07月01日 11:23:06 作者：愛睡懶覺

最近做 PC 端支付功能,輸入支付密碼的時(shí)候,Chrome 彈了個(gè)是否保存密碼？說實(shí)話,這功能擱登錄場景,確實(shí)挺方便, 但支付密碼？說難聽點(diǎn),萬一用戶真保存了,自己都忘了,或者電腦不是自己的,密碼直接暴露,所以本文給大家介紹了利用Vue3實(shí)現(xiàn)防止支付密碼被瀏覽器保存功能

背景介紹

最近做 PC 端支付功能，輸入支付密碼的時(shí)候，Chrome 很“體貼”地彈了個(gè)：

"是否保存密碼？"

說實(shí)話，這功能擱登錄場景，確實(shí)挺方便。但支付密碼？說難聽點(diǎn)，萬一用戶真保存了，自己都忘了，或者電腦不是自己的，密碼直接暴露。于是，產(chǎn)品一句話：

“瀏覽器這個(gè)彈窗，給我去掉。”

好家伙，去掉瀏覽器行為，這不是在為難我初級(jí)開發(fā)。

方案思路

項(xiàng)目基于 Vue3 + TypeScript + Element Plus，常規(guī)做法是用 <el-input type="password" /> 來實(shí)現(xiàn)密碼輸入。但只要 type="password"，瀏覽器一定會(huì)觸發(fā)保存密碼提示。

所以我的思路是：

把 type 改成 text，規(guī)避瀏覽器的默認(rèn)密碼保存行為

輸入框里不直接展示真實(shí)密碼，輸入什么都用 ● 替換

真實(shí)密碼值自己內(nèi)部單獨(dú)存一份；

實(shí)現(xiàn)步驟

基礎(chǔ)版本

<template>
  <el-input
    v-model="pwdSymbol"
    placeholder="請輸入"
    type="text"
    @input="handleInput"
    @blur="handleBlur"
  />
</template>
<script setup lang="ts">
const pwdSymbol = ref("");
const pwd = ref("");
const handleInput = (value: string) => {
  const newValue = value.replace(/●/g, "")
  const lastLength = pwdSymbol.value.length;
  if (newValue) {
    pwd.value += newValue;
  } else {
    if (!lastLength) {
      pwd.value = "";
    } else {
      const arr = pwd.value.split("");
      arr.splice(-1, 1);
      pwd.value = arr.join("");
    }
  }
  let data = "";
  for (let i = 0; i < value.length; i++) {
    data += "●";
  }
  pwdSymbol.value = data;
};
const handleBlur = () => {
  console.log(pwd.value);
};
</script>

pwdSymbol用來展示●，所以我們還需要聲明一個(gè)變量，用來存儲(chǔ)用戶真正輸入的值pwd
handleBlur主要是為了查看我們輸入的密碼是否正確

遇到的問題

只能支持「從最后一位輸入」
中間位置輸入、刪除，真實(shí)密碼全亂套
撤回（Ctrl+Z）直接把密碼還原，真實(shí)值跟展示完全對不上

進(jìn)階方案：精準(zhǔn)控制光標(biāo) & 禁止撤回

通過 ref 獲取原生 input DOM，拿到光標(biāo)位置，精準(zhǔn)處理字符串
撤回操作干脆禁了，省事

// 設(shè)置input的ref
const elInputRef = ref();
const handleInput = (value: string) => {
  const el = elInputRef.value?.input;
  const cursorPos = el.selectionStart;
  const newValue = value.replace(/●/g, "");
  const lastLength = pwdSymbol.value.length;
  if (newValue) {
    if (cursorPos != lastLength) {
      // 說明不是往后添加，而是在中間插入
      const arr = pwd.value.split("");
      arr.splice(cursorPos - 1, 0, newValue);
      pwd.value = arr.join("");
    } else {
      if (value.length === 1) {
        // 防止選擇內(nèi)容直接替換
        pwd.value = newValue;
      } else {
        pwd.value += newValue;
      }
    }
  } else {
    if (!lastLength) {
      pwd.value = "";
    } else {
      // 需要辨別是刪除還是撤回
      const arr = pwd.value.split("");
      arr.splice(cursorPos, 1);
      pwd.value = arr.join("");
    }
  }
  let data = "";
  for (let i = 0; i < value.length; i++) {
    data += "●";
  }
  pwdSymbol.value = data;
};
const handleKeydown = (e: KeyboardEvent) => {
  // 判斷是否按下撤回快捷鍵（Windows: Ctrl+Z，Mac: Meta+Z）
  if ((e.ctrlKey || e.metaKey) && e.key.toLowerCase() === "z") {
    e.preventDefault(); // 阻止默認(rèn)撤回行為
    console.log("用戶進(jìn)行了撤回操作");
  }
};