Javascript 通过JS更改html输入类型？

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

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

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

尝试：

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

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

document.getElementById（'hybrid'）。type='password'；

无标题文件
函数changefield（）{
document.getElementById（“密码箱”）.innerHTML=“”；
document.getElementById（“密码字段”.focus（）”；
}

更改

的

类型会在某些浏览器（旧IE和Firefox版本）中引发安全错误

您需要创建一个新的
input
元素，将其
类型设置为所需的类型，并从现有属性克隆所有其他属性

我在jQuery占位符插件中执行此操作：

要在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>


函数更改输入类型（oldObject，oType）{
var newObject=document.createElement（'input'）；
newObject.type=oType；
如果（oldObject.size）newObject.size=oldObject.size；
如果（oldObject.value）newObject.value=oldObject.value；
如果（oldObject.name）newObject.name=oldObject.name；
如果（oldObject.id）newObject.id=oldObject.id；
如果（oldObject.className）newObject.className=oldObject.className；
oldObject.parentNode.replaceChild（newObject，oldObject）；
返回newObject；
}
某些浏览器不支持此功能（如我记得的话），但其他浏览器支持此功能：

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

或

这是我的

实际上，您是在利用标记中的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> 


函数密码\设置\属性（）{
if（document.getElementsByName（“登录\文本\密码”）[0].value.replace（/\s+/g'，）==“document.getElementsByName[0].value==null）{
document.getElementsByName（“登录\文本\密码”）[0].setAttribute（'type'，'text'）
document.getElementsByName（“登录\文本\密码”）[0]。值='password'；
}
否则{
document.getElementsByName（“登录\文本\密码”）[0]。setAttribute（'type'，'password'））
}
}

其中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>

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

此外，我还将其与浏览器检查相结合，以便在Chrome中将输入type=“number”字段更改为type=“text”，因为“formnovalidate”现在似乎不起作用

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

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

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


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



$（“.show pass”）。单击（函数（e）{
e、 预防默认值（）；
var type=$（“#注册表单密码”）.attr（'type'）；
开关（类型）{
案例“密码”：
{
$（“#注册表单密码”）.attr（'type'，'text'）；
返回；
}
案例“文本”：
{
$（“#注册表单密码”）.attr（'type'，'password'）；
返回；
}
}
})；

这假设您的输入看起来是这样的
，因此请记住为它分配一个ID。如何在不使用脚本的情况下在标记本身内部完成它？使用输入字段可以具有的任何一个事件-onfocus、onclick等，并放入类似于
This.type='password'
。如果不使用所有的if-co，这是否有效条件？我也有同样的问题，但我不需要对象彼此相等。@JPHochbaum当然。事实上，我最初的答案没有包含所有额外的代码-其他人添加了它。非常好的帮助。保持它向上。这并没有显示如何使用脚本更改类型，这是一种jQuery方法。这与sinc越来越不相关了ejQuery在新项目中使用不多。
if (navigator.userAgent.toLowerCase().indexOf('chrome') > -1)
    document.getElementById("input_id").attributes["type"].value = "text";

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


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