Remove text after clicking in the textbox and then display it again after leaving in javascript

Some textboxes on the webpage need to give the user some hints to guide them to input. Search textboxes belong to this category, and often give the user some search tips in the textbox to guide them to search for the corresponding content. Since they needs to input keywords during the search, the program automatically removes the prompt text in the textbox after they click the textbox to focus, so that they can enter the search keywords; if they does not enter any keyword after focusing, the prompt text is automatically restored after leaving.

How to realize such a function? The html tag does not have such a function, it can only be completed with javascript, and the implementation is simple, and a few javascript codes can get it.

Remove text after clicking in the textbox and then display it again after leaving in javascript(Example)

Html code:

<input type="text" id="inSearch" maxlength="200" value="Find it as soon as you search" onblur="textOnblue(this)" onclick="textOnclick(this)" />id="btnSearch" value=" Search " />

Javascript code:

<script type="text/javascript">
       function textOnblue(obj) {
              if (obj.value == "") {
                     obj.value = "Find it as soon as you search";
              }
       }
       function textOnclick(obj) {
              if (obj.value == "Find it as soon as you search") {
                     obj.value = "";
              }
       }
       </script>

The above is an example a search textbox in which you click to focus and clear the text, after leaving, it will automatically display the prompt text. Copy the code into the html file to test. In order to make the page beautiful, it is best to decorate the textbox and buttons with the Css, and define the prompt text in the text box to be gray. Don't let it appear suddenly, you can see it clearly.