通过JS更改html输入类型？

18

尝试：

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

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

来源

2012-02-01 10:10:51 deed02392

+0

这是假设你的投入是这样的'<输入ID =“myElement”类型=“文本” />'所以记得要分配一个ID给它 – MMM 2012-02-01 10:12:17

+0

怎么可能在标签本身没有内部完成使用脚本 – user1150271 2012-02-01 10:13:41

+1

通过使用输入字段可以具有的任何一个事件 - onfocus，onclick等，并放置诸如'this.type ='password''之类的东西。 – deed02392 2012-02-01 10:23:40

0

<!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>

来源

2012-02-01 10:16:10

9

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

来源

2012-02-01 10:20:29

+0

这个工作没有使用所有的条件？我有同样的问题，但我不需要相互平等的对象。 – 2016-05-20 20:06:42

+1

@JPHochbaum当然。事实上，我原来的答案并不包含所有额外的代码 - 其他人添加了它。 – 2016-05-22 14:44:15

0

这不是由某些浏览器（IE，如果我记得）的支持，但在剩下的工作：

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

或

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

来源

2012-02-01 10:23:59 Evert

3

这是我对我的。

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

来源

2012-09-30 17:16:48 Sventek

0

我不得不添加一个“价值”来的埃弗特的代码最终得到它的工作。

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

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

来源

2014-02-12 17:03:30 squarcle

通过JS更改html输入类型？

回答

相关问题