通过JS更改html输入类型？

Question

如何通过标签本身将类型从文本更改为密码

<input type='text' name='pass'  />

是否可以在输入标记本身内插入JS以将type ='text'更改为type ='password'？

Answer 1

尝试:

<input id="hybrid" type="text" name="password" />

<script type="text/javascript">
    document.getElementById('hybrid').type = 'password';
</script>

Answer 2

改变type的<input type=password>抛出在某些浏览器(旧IE和Firefox的版本)中的安全错误.

您需要创建一个新input元素,将其设置type为您想要的元素,并从现有元素中克隆所有其他属性.

我在我的jQuery占位符插件中执行此操作:https://github.com/mathiasbynens/jquery-placeholder/blob/master/jquery.placeholder.js#L80-84

要在Internet Explorer中工作:

• 动态创建一个新元素
• 将旧元素的属性复制到新元素中
• 将新元素的类型设置为新类型
• 用新元素替换旧元素

以下功能为您完成上述任务:

<script>
function changeInputType(oldObject, oType) {
    var newObject = document.createElement('input');
    newObject.type = oType;
    if(oldObject.size) newObject.size = oldObject.size;
    if(oldObject.value) newObject.value = oldObject.value;
    if(oldObject.name) newObject.name = oldObject.name;
    if(oldObject.id) newObject.id = oldObject.id;
    if(oldObject.className) newObject.className = oldObject.className;
    oldObject.parentNode.replaceChild(newObject,oldObject);
    return newObject;
}
</script>

Answer 3

是的，您甚至可以通过触发事件来更改它

<input type='text' name='pass'  onclick="(this.type='password')" />


<input type="text" placeholder="date" onfocusin="(this.type='date')" onfocusout="(this.type='text')">