点击按钮实现文本星号/圆点隐藏、原内容切换显示功能咨询

实现思路 #

• 原有方案不可行的核心原因是：type 是 <input> 等表单元素的专属属性，<span> 标签不支持该属性，修改后不会产生隐藏文本的效果。
• 可行的实现逻辑：
  1. 第一次点击隐藏按钮时，先把原始患者ID存入span的自定义属性中备份
  2. 将span的可见内容替换为和原ID长度一致的圆点（或星号）
  3. 再次点击时，从自定义属性中取出备份的原始ID，恢复显示即可

完整实现代码 #

HTML代码

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="container">
  <p>
    <span class="patient-id-content">34324345</span>
    <button class="hide-id">
      隐藏/显示
    </button>
  </p>
</div>

JS代码

$('.hide-id').on('click', function () {
  const $idEl = $('.patient-id-content');
  // 优先取备份的原始ID，没有备份就取当前文本作为原始ID
  const originId = $idEl.data('origin-id') || $idEl.text().trim();
  
  if ($idEl.hasClass('hidden')) {
    // 当前是隐藏状态，恢复原始ID显示
    $idEl.text(originId).removeClass('hidden');
    // 如果用眼睛图标做按钮，可在此处替换为睁眼图标
  } else {
    // 当前是显示状态，替换为等长圆点隐藏内容
    $idEl.data('origin-id', originId)
         .text('●'.repeat(originId.length))
         .addClass('hidden');
    // 如果用眼睛图标做按钮，可在此处替换为闭眼图标
  }
});

如果需要替换为星号隐藏，只需要把代码里的'●'改为'*'即可，逻辑完全通用。

内容的提问来源于stack exchange，提问作者mahesh kumar