如何实现鼠标悬停时显示完整未脱敏账号（HTML/jQuery/JS）

核心逻辑非常直接：页面初始加载时输入框默认渲染掩码账号，监听账号输入框的鼠标移入、移出事件，移入时切换为真实账号，移出时切回掩码账号即可，真实账号直接硬编码存储。

完整实现代码（jQuery版本） #

<table>
  <tr>
    <td> Account Number </td>
    <td> <input type="text" id="accountNum" value="4xxx763" readonly></td>
  </tr>
</table>

<!-- 引入本地jQuery文件 -->
<script src="jquery.min.js"></script>
<script>
$(function() {
  // 硬编码真实账号、掩码账号
  const REAL_ACCOUNT = '4329763';
  const MASK_ACCOUNT = '4xxx763';
  const $accountInput = $('#accountNum');

  // 鼠标悬停显示真实账号
  $accountInput.mouseenter(function() {
    $(this).val(REAL_ACCOUNT);
  })
  // 鼠标移出切回掩码
  .mouseleave(function() {
    $(this).val(MASK_ACCOUNT);
  })
})
</script>

可选：原生JS版本（无需引入jQuery） #

如果不想加载jQuery，直接用原生JavaScript实现逻辑即可：

document.addEventListener('DOMContentLoaded', function() {
  // 硬编码配置
  const REAL_ACCOUNT = '4329763';
  const MASK_ACCOUNT = '4xxx763';
  const accountInput = document.getElementById('accountNum');

  accountInput.addEventListener('mouseenter', function() {
    this.value = REAL_ACCOUNT;
  })
  accountInput.addEventListener('mouseleave', function() {
    this.value = MASK_ACCOUNT;
  })
})

注意事项 #

• 给input加readonly属性是为了避免用户误修改账号内容，如果业务场景允许编辑账号，直接去掉这个属性即可
• 真实账号、掩码账号都是硬编码配置，直接修改代码里对应常量的值就能适配不同账号
• 如果需要适配列表里的多个账号条目，给每个账号input加上统一class，遍历绑定事件、从元素自定义属性取对应真实账号值即可批量实现效果

内容的提问来源于stack exchange，提问作者Tejas Mehta