Discussion on the type attribute of JS modifying input _javascript Skills

Source: Internet
Author: User
JS modifies the type attribute of input some restrictions. The INPUT element can modify its value before it has been inserted into the document stream, and is ok under IE and ff. However, if input already exists on the page, its type attribute is read-only under IE and cannot be modified. Read-write properties are still available under FF.

Today encountered a problem, the input box has the default value "password", but when the focus, "password" will be removed, the input directly into the "* * *" password type. Obviously, at the beginning, the type of input was text, which later became the password type. The intuitive idea is to use JS to modify the type of input. But IE is not feasible, so can only change the train of thought, write two input, a text type, a password type, divided to monitor onfocus and onblur events. As follows:

Note: The script snippet is written in HTML
Copy Code code as follows:

<! DOCTYPE HTML PUBLIC "-//w3c//dtd HTML 4.01//en" "HTTP://WWW.W3.ORG/TR/HTML4/STRICT.DTD" >
<meta http-equiv= "Content-type" content= "text/html; Charset=utf-8 "/>
<title> when making </title>
<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>

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.