如何在Nuxt中阻止输入框弹出“管理钱包个人信息”提示？

常见可行方案 #

• 指定更精准的autocomplete属性值
  现代浏览器大多会忽略autocomplete="off"，可以针对性设置特殊属性值来规避钱包提示。比如用autocomplete="new-password"（即使不是密码输入框，多数浏览器会识别并禁用这类自动填充提示），或者使用浏览器未收录的自定义值，示例：

  <template>
    <input 
      type="text" 
      autocomplete="new-password"
      placeholder="请输入内容"
    />
  </template>
  

• 临时切换输入框类型
  在输入框获焦时临时修改type属性，失焦后恢复，绕过浏览器的自动填充检测逻辑：

  <template>
    <input 
      ref="targetInput"
      type="text"
      @focus="swapType"
      @blur="restoreType"
      placeholder="请输入内容"
    />
  </template>
  
  <script setup>
  const targetInput = ref(null)
  
  const swapType = () => {
    targetInput.value?.setAttribute('type', 'search')
  }
  
  const restoreType = () => {
    targetInput.value?.setAttribute('type', 'text')
  }
  </script>
  

• 添加隐藏诱饵输入框
  在真实输入框上方放置一个完全隐藏的输入框，让浏览器的自动填充机制优先匹配这个诱饵，从而忽略真实输入框：

  <template>
    <!-- 诱饵输入框 -->
    <input 
      type="text" 
      autocomplete="on"
      style="position: absolute; opacity: 0; height: 0; width: 0; border: 0;"
      tabindex="-1"
    />
    <!-- 真实输入框 -->
    <input 
      type="text" 
      autocomplete="off"
      placeholder="请输入内容"
    />
  </template>
  

• 封装自定义指令复用逻辑
  若多个输入框存在该问题，可封装成Nuxt自定义指令全局使用：

  // plugins/disableWalletPrompt.js
  export default defineNuxtPlugin(nuxtApp => {
    nuxtApp.vueApp.directive('no-wallet-prompt', {
      mounted(el) {
        el.setAttribute('autocomplete', 'new-password')
        el.addEventListener('focus', () => el.type = 'search')
        el.addEventListener('blur', () => el.type = 'text')
      }
    })
  })
  

  组件内使用：

  <template>
    <input 
      v-no-wallet-prompt
      type="text"
      placeholder="请输入内容"
    />
  </template>
  

内容的提问来源于stack exchange，提问作者Mohsin Raaziii