JavaScript and jquery implement setting and removing text box default value effect code_javascript skills

The effect you want to achieve here is to set and remove the default value of the text box. When the mouse is placed in the text box as shown below, the gray text disappears.

1. You can use a simple way, which is to add the onfocus attribute to the input text box, as follows:

Copy code The code is as follows:

onfocus='if(this.value=="Please enter keywords to search"){this.value="";}; '
onblur='if(this.value==""){this.value="Please enter keywords to search";};'>

In fact, the onfocus attribute is very useful. You can also change the css style through the onfocus attribute, as shown in the following code:

Copy code The code is as follows:

onfocus='if(this.value=="Please enter keywords to search"){this.value="";}; this.className="input01"'
onblur='if(this.value==""){this.value="Please enter keywords to search";}; this.className="input02"'>

2. It can also be implemented using jquery:

Copy code The code is as follows:

$(document).ready(function() {
      var vdefault = $('#keyword').val();

$('#keyword').focus(function() {
//When getting focus, if the value is the default value, it is set to empty
If ($(this).val() == vdefault) {
                  $(this).val("");
            }
        });
$('#keyword').blur(function() {
//When the focus is lost, if the value is empty, it is set to the default value
If ($(this).val()== "") {
                      $(this).val(vdefault); ;
            }
        });
});

Of course there are many ways to implement it, here are just the ones I have used...