表格中输入框类型切换异常: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
相关产品推荐
相关产品推荐

