Step by step, gather small streams ------- js to implement the placeholder effect, placeholder. js

Step by step, gather small streams ------- js to implement the placeholder effect, placeholder. js

I asked a question in the "Technical Q & A" a few days ago, and then I wrote a reply to summarize the effect of placeholder. I have to say that if I know more, I can make it concise, describe the clearest expressions in the simplest language.

However, placeholder is a newly added attribute of html5. its compatibility still has problems. After thinking about it, it achieves its implementation effect using js.

Let's take a look at the implementation results:

When you enter the password

This achieves the effect. Then, did you find the difference? Did you think of the implementation method at once? Yes, it's that simple, the implementation principle is as follows:

Under "Login mailbox", put two inputs, one of which is text and the other is password. When you click it, the password is displayed and the text is displayed when you leave, of course, you must pay attention to the details here, that is, when changing the displayed input, pay attention to "Focus ".

Let's take a look at the implementation code:

<Input type = "text" id = "loginPwd" class = "loginText" value = "-Logon password-" onclick = "change ()" onmouseover = this. focus (); this. select ();> <input type = "password" name = "loginPwd" id = "realPwd" style = "display: none; "class =" loginText "onBlur =" back () ">

First, list the password and text, so that the password must be displayed as none, and call js when clicked.

function change(){document.getElementById("loginPwd").style.display='none';document.getElementById("realPwd").style.display='inline';document.getElementById("realPwd").focus();}

Then, if you want to return the initial status, call the back () method.

function back(){var msg=document.getElementById("realPwd").value;if(msg.length==0){document.getElementById("loginPwd").style.display='inline';document.getElementById("realPwd").style.display='none';}}

If no value is input and the initial status is returned when the focus is lost, the desired effect will be obtained.

I am really grateful to the two buddies who gave me the prompt a few days ago. I found that many times I don't know how to search, how to search, and what I want, but I don't know how to express it more effectively, then, the search results in the difficulty increasing several points out of thin air. You still need to learn more. Come on...