通过JS更改html输入类型？答案

【问题标题】：change html input type by JS?通过JS更改html输入类型？
【发布时间】：2012-02-24 00:36:07
【问题描述】：

如何通过标签本身做到这一点将类型从文本更改为密码

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

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

【问题讨论】：

标签： javascript html input

【解决方案1】：

试试：

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

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

【讨论】：

这假设你的输入看起来像这样<input id="myElement" type="text"/>所以记得给它分配一个ID
如何在不使用脚本的情况下在标签本身内完成
通过使用输入字段可以具有的任何事件 - onfocus、onclick 等，并放置在类似 this.type='password' 的内容中。

【解决方案2】：

在某些浏览器（旧 IE 和 Firefox 版本）中更改 type 的 type 会引发安全错误。

您需要创建一个新的 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>

【讨论】：

在不使用所有 if 条件的情况下是否可行？我有同样的问题，但我不需要对象彼此相等。
@JPHochbaum 当然。事实上，我最初的答案并没有包含所有额外的代码——其他人添加了它。

【解决方案3】：

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

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


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

【讨论】：

很好的帮助。继续努力

【解决方案4】：

这是我的。

本质上，您是在使用标签中的 onfocus 和 onblur 命令来触发相应的 javascript。可以这么简单：

<span><input name="login_text_password" type="text" value="Password" onfocus="this.select(); this.setAttribute('type','password');" onblur="this.select(); this.setAttribute('type','text');" /></span>

此基本功能的演进版本会检查空字符串并在出现空文本框时将密码输入返回到原始“密码”：

    <script type="text/javascript">
        function password_set_attribute() {
            if (document.getElementsByName("login_text_password")[0].value.replace(/\s+/g, ' ') == "" || document.getElementsByName[0].value == null) {
                document.getElementsByName("login_text_password")[0].setAttribute('type','text')
                document.getElementsByName("login_text_password")[0].value = 'Password';
            }
            else {
                document.getElementsByName("login_text_password")[0].setAttribute('type','password')
            }
        }
    </script>

HTML 的样子：

<span><input name="login_text_password" class="roundCorners" type="text" value="Password" onfocus="this.select(); this.setAttribute('type','password');" onblur="password_set_attribute();" /></span>

【讨论】：

【解决方案5】：

我必须在 Evert 代码的末尾添加一个“.value”才能使其正常工作。

我还将它与浏览器检查结合起来，以便在 Chrome 中将输入 type="number" 字段更改为 type="text"，因为 'formnovalidate' 现在似乎不起作用。

if (navigator.userAgent.toLowerCase().indexOf('chrome') > -1)
    document.getElementById("input_id").attributes["type"].value = "text";

【讨论】：

【解决方案6】：

$(".show-pass").click(function (e) {
    e.preventDefault();
    var type = $("#signupform-password").attr('type');
    switch (type) {
        case 'password':
        {
            $("#signupform-password").attr('type', 'text');
            return;
        }
        case 'text':
        {
            $("#signupform-password").attr('type', 'password');
            return;
        }
    }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" name="password" class="show-pass">

【讨论】：

这并没有展示如何使用 vanilla Javscript 更改类型，它是一种 jQuery 方法。这变得越来越不重要，因为 jQuery 很少用于新项目。

【解决方案7】：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.or/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>
<script type="text/javascript" language="javascript">
function changefield(){
    document.getElementById("passwordbox").innerHTML = "<input id=\"passwordfield\" type=\"password\" name=\"password-field\" title=\"Password\" tabindex=\"2\" />";
    document.getElementById("password-field".focus();
}
</script>
</head>

<body>
<div id="passwordbox">
<input id="password-field" type="text" name="password-field" title="Password"onfocus="changefield();" value="Password" tabindex="2" />
</div>
<input type="submit" name="submit" value="sign in" tabindex="3" />

</body>
</html>

【讨论】：

【解决方案8】：

某些浏览器不支持此功能（如果我记得是 IE），但它在其余浏览器中有效：

document.getElementById("password-field").attributes["type"] = "password";

或

document.getElementById("password-field").attributes["type"] = "text";

【讨论】：

【解决方案9】：

let btn = document.querySelector('#btn');
let input = document.querySelector('#username');

btn.addEventListener('click',()=> {
    if ( input.type === "password") {
        input.type = "text"
    } else {
        input.type = "password"


    }
})

<input type="password" id="username" >

<button id="btn">change Attr</button>

【讨论】：