Js to modify the type attribute of input
- 2020-03-26 21:25:59
- OfStack
Js modifies the type attribute of input with some restrictions. The value of the input element can be modified before it is inserted into the document stream, which is fine under ie and ff. However, if the input already exists on the page, its type attribute becomes read-only under ie and cannot be modified. It's still a read-write property under ff.
Today, I encountered a problem. The default value of "password" is in the input field, but when I get the focus, the word "password" will be removed, and the password type "****" will be changed to "password". Obviously, at first, the input type was text, and then it changed to password. The intuitive idea is to modify the type type of input with js. However, this is not feasible in ie, so I can only change the way of thinking, write two input, a text type, a password type, separate monitoring onfocus and onblur events. As follows:
Note: the script is written into HTML
Today, I encountered a problem. The default value of "password" is in the input field, but when I get the focus, the word "password" will be removed, and the password type "****" will be changed to "password". Obviously, at first, the input type was text, and then it changed to password. The intuitive idea is to modify the type type of input with js. However, this is not feasible in ie, so I can only change the way of thinking, write two input, a text type, a password type, separate monitoring onfocus and onblur events. As follows:
Note: the script is written into HTML
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title> Adam made </title>
</head>
<style type="text/css">
</style>
<body>
<input name="" type="text" value=" password " class="inputText_1" id="tx" style="width:100px;" />
<input name="" type="password" style="display:none;width:100px;" id="pwd" />
<script type="text/javascript">
var tx = document.getElementById("tx"), pwd = document.getElementById("pwd");
tx.onfocus = function(){
if(this.value != " password ") return;
this.style.display = "none";
pwd.style.display = "";
pwd.value = "";
pwd.focus();
}
pwd.onblur = function(){
if(this.value != "") return;
this.style.display = "none";
tx.style.display = "";
tx.value = " password ";
}
</script>
</body>
</html>