Analysis: default prompt information in the input box of the input Form

I believe that you have seen the prompt information in the input boxes of the above two images, and some people should have done it themselves.

I have done the same thing before. I should write the prompt content in the input box. When the mouse gets the focus, the content is cleared. when the focus is lost, the system checks whether the content is empty, if this parameter is set to null, the prompt content is restored. Otherwise, the prompt content is not displayed. But is this practice reasonable? Let's perform the analysis one by one.

1. If the input content is exactly the same as the prompt content, how should we determine if the focus is lost?

2. If the input is in the form, after the form is submitted, the system prompts that the information will be submitted along with the form. Do you still need to judge at the backend that the submitted information is not the same as the prompt information before performing data operations?

3. If both 1 and 2 are triggered, do backend operations need to be performed?

Since this practice has so many shortcomings, how can it be better? In fact, the method is very simple. Write the prompt information in a module, such as div, and set the style of the div so that it can be moved to the input box. As for js, you only need to write one more sentence, when I click this div, it also triggers the get focus event in the input box.

The advantage of doing so is that it not only solves the problems of and, but also prompts content not limited to text. You can be an image or even flash, greatly enhancing user interaction.

Simple Section Page code:

<Input class = "search" type = "text" name = "search"> <div id = "searchtip" style = "position: relative; color: # ccc "> <div style =" position: absolute; top:-18px; left: 4px "> enter the information </div>

Appendix 1: I have integrated this function into my own plug-ins. For details, refer to jquery. HooRay, a commonly used jquery tool plug-in.

Appendix 2: Learn about the PLACEHOLDER attribute of html5. click here