通過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輸入類型？

回答

相關問題