You need to enable JavaScript to run this app.
优惠活动
大模型
产品
解决方案
定价
更多

表格中输入框类型切换异常:Type变更但内容未隐藏

解决表格中Input类型切换后文本未隐藏的问题

嘿,我看你遇到了个小坑——明明把输入框的type从text改成了password,但输入的文本还是看得见对吧?这问题主要有两个原因,咱们一步步解决:

首先,你的代码里有个容易忽略的错误:你选中的rows[1].cells[0]是表格的单元格(元素),而不是里面的标签!虽然有些浏览器可能会容错,但你其实没真正操作到输入框,这肯定会导致异常。

其次,就算你正确选中了input,部分浏览器在修改type属性后,不会自动重新渲染已有的输入内容,所以文本还是保持可见状态。

给你修正后的代码,直接用就行:

function changeType() {
  // 精准定位到第二行第一个单元格里的input元素
  var input = document.getElementById("Table").rows[1].cells[0].querySelector('input');
  if (!input) return; // 避免找不到元素时报错
  
  var inputValue = input.value;
  if (input.type === "password") {
    input.type = "text";
  } else {
    input.type = "password";
    // 重新赋值,强制浏览器切换到密码显示模式
    input.value = inputValue;
  }
}

解释下关键改动:

  • 用querySelector('input')从单元格里拿到真正的输入框元素,确保操作对象正确。
  • 在切换到password类型后,重新赋值一次输入框的值,这会触发浏览器重新渲染内容,把可见文本变成密码圆点。

你可以直接替换原来的函数,测试下应该就能正常切换显示状态啦!

内容的提问来源于stack exchange,提问作者zwerg4

相关产品推荐
方舟 Agent Plan

超全模态模型 × Harness 升级,最新支持 Deepseek-V4.1-Flash、GLM-5.3 系列、Doubao-Seedream-5.0-pro、Kimi-K3 (部分), 限时 9.9 元起

最近更新时间:2026.05.21 07:17:12