<input type="password" name="info[password]" id="password3" class="list-input" onblur="if(this.value==''){this.value=' Please enter a 6-20 digit password';}" onfocus="if(this.value=='Please enter a 6-20 digit password'){this.value='';}" value="Please enter a 6-20 digit password Password" placeholder="Please enter 6-20 digit password"/>
This sentence is now displayed by default..., and "Please enter a 6-20-digit password" is displayed after the mouse is clicked on the input box. How can I make it display "Please enter a 6-20-digit password" by default, and after input it becomes...
![[Web front-end] Node.js quick start](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
You wrote a lot of messy attributes, but you didn’t write placeholder. . .
placeholder="Please enter 6-20 digit password", add this to the input
Of course, if you use js to assign a value to vulue, it will be displayed as *. You can try adding placeholder to the input tag
New browsers support placeholder, and then set the css attribute to make the text gray so that it is not too dark.
Use placeholder
If you don’t need to consider compatibility issues under IE, then the easiest way is placeholder
But the placeholder attribute is compatible up to IE10
So if you need to consider compatibility with browsers below IE10, I suggest you take a look at a plug-in jquery-placeholder
The mobile terminal is compatible. If it is PC terminal, you can download the plug-in compatible with ie8-
Download address:
Link description
<input type="password" placeholder="The default text you want to display">
The simplest is placeholder, but this is not compatible with IE.
The way to achieve compatibility is to
write an em tag (the position is the sibling node of the input). The position is absolutely positioned to the input position of the input box.
Use JS to determine whether the control has focus. / blur/ keyin status to confirm whether the em tag is displayed