使用input对电话号码实现隐藏显示

1、首先选择利用表格来呈现html结构

    <!-- html代码 -->
    <table border="1px solid">
      <thead>
        <tr>
          <th>姓名</th>
          <th>电话号码</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td align="center">张三</td>
          <td align="center"><input type="password" value="123456789" readonly="readonly" /></td>
        </tr>
        <tr>
          <td align="center">李四</td>
          <td align="center"><input type="password" value="987654321" readonly="readonly"/></td>
        </tr>
        <tr>
          <td align="center">王五</td>
          <td align="center"><input type="password" value="134893029" readonly="readonly"/></td>
        </tr>
      </tbody>
    </table>

2、然后设置一下input标签的样式

    /* css样式设置 */
      input {
        outline: none;
        border: none;
        text-align: center;
      }

3、通过JQuery点击事件实现显示

 <!-- js代码实现 -->
    <script>
      $("input").click(function (e) {
        e.target.type = "number";
      });
    </script>

注意：使用jQuery事件需要提前引入jQuery文件

4、效果展示

（1）代码编写完成后的效果展示图

（2）点击事件完成后的效果展示图