Home > Web Front-end > JS Tutorial > js css implements prompt text to increase form usability_javascript skills

js css implements prompt text to increase form usability_javascript skills

WBOY
Release: 2016-05-16 17:32:59
Original
1117 people have browsed it

When we usually design forms, we will add some prompt text. For example, in the search box, we will prompt "Please enter keywords" and hide and display them in a timely manner when the search box gets focus or loses focus. The most common The method is to use value to set:

Copy code The code is as follows:


<script> <br>document.getElementById("keyword").onfocus = function() { <br>if (document.getElementById("keyword").value == " Please enter the keyword") { <br>document.getElementById("keyword").value = ""; <br>} <br>} <br>document.getElementById("keyword").onblur = function() { <br>if (document.getElementById("keyword").value == "") { <br>document.getElementById("keyword").value = "Please enter the keyword"; <br>} <br>} <br>document.getElementById("search").onsubmit = function() { <br>var keyword = document.getElementById("keyword").value; <br>if (keyword == "" || keyword == "Please enter keywords") { <br>alert("Please enter keywords"); <br>return false; <br>} <br>return true; <br>} <br></script>

Although such code achieves the function we want, it is not clean. The reason is that the text such as "Please enter the keyword" is just a prompt text, not a value, although technically there is no big difference. Problem, but it still seems troublesome in many cases. For example, we may make the prompt text display gray, while the text typed by the user displays black.
Let’s see how to use css to achieve a better way:
Copy the code The code is as follows:



Although this implementation requires a lot of CSS and JS code It is a little bit different, but the structure is more reasonable. By introducing label to display the prompt text (positioned through the position attribute of CSS), the value itself is simpler, and the prompt text and the text entered by the user are easier to control in style, such as the depth of the color, so that Improve form usability.
Related labels:
source:php.cn
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template