尝试：

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

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

改变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>

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

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


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

这是我的。

本质上，您正在使用标签中的 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>

我必须在 Evert 代码的末尾添加一个“.value”才能让它工作。

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

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