js动态修改input输入框的type属性(实现方法解析)

动态修改input type的需求与jQuery限制

实现目标：创建一个输入框，在未获得焦点时显示默认值“密码”；在失去焦点且已输入内容时，将显示内容替换为“*****”以保护隐私。

<input name=”password” type=”text” id=”showPwd” tabindex=”2″ class=”input” value=”密码” />

直观的思路是使用JavaScript来动态改变输入框的类型。

$(“#showPwd”).focus(function(){ $(this).attr(‘type','password'); });

然而，上述代码并未达到预期效果，而是抛出了“uncaught exception type property can't be changed”错误。查阅jQuery 1.42版本源码第1488行可知，框架明确禁止了type属性的修改。

// We can't allow the type property to be changed (since it causes problems in IE) if ( name === “type” && rtype.test( elem.nodeName ) && elem.parentNode ) { jQuery.error( “type property can't be changed” ); }

原生JS修改type的浏览器兼容性差异

既然jQuery无法修改，尝试使用原生JavaScript直接操作DOM属性。

$(“#pwd”).focus(function(){ $(“#pwd”)[0].type = ‘password'; $(“#pwd”).val(“”); });

测试发现，在Firefox浏览器中，该方案可以成功将输入框type修改为“password”并将value清空；但在IE浏览器中，操作会失败并提示不支持该命令。

为了确认IE下是否真的无法读取type属性，添加调试代码：$(“#showPwd”).focus(function(){ alert($(“#showPwd”)[0].type); $(“#showPwd”)[0].type = ‘password'; $(“#showPwd”).val(“”); });

调试结果显示，IE下可以成功读取type属性值为“text”，说明问题仅在于无法修改该属性。因此，可行的替代思路是先移除当前输入框，再动态生成一个新的type为“password”的输入框。

基于显示隐藏的兼容解决方案

预先在HTML中定义好type为password的隐藏输入框。

<input name=”password” type=”password” id=”password” class=”input” style=”display: none;” />

通过jQuery控制两个输入框的显示与隐藏来模拟type切换：$(“#showPwd”).focus(function() { var text_value = $(this).val(); if (text_value == this.defaultValue) { $(“#showPwd”).hide(); $(“#password”).show().focus(); } }); $(“#password”).blur(function() { var text_value = $(this).val(); if (text_value == “”) { $(“#showPwd”).show(); $(“#password”).hide(); } });

最终效果：当输入框获得焦点时，输入的内容以“****”形式显示；当失去焦点且内容为空时，重新显示“密码”提示文字。