javascript search box effect implementation method

2020-06-12 08:32:34
OfStack

This article describes the javascript search box effect implementation method. Share to everybody for everybody reference. Specific implementation methods are as follows:


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title> Search box effect </title>
<script type="text/javascript">
function iniEvent() {
  var txtSearch = document.getElementById("txtSearch");
  txtSearch.onfocus = function () {
    if (this.value == " Please enter the keywords " || this.value == "") {
      this.value = "";
      this.style.color = "black"; // Change the text box font color 
    }
  }
  txtSearch.onblur = function () {
    if (this.value == " Please enter the keywords " || this.value == "") {
      this.value = " Please enter the keywords ";
      this.style.color = "red";  // Change the text box font color 
    }
    else {
      this.style.color = "black";
    }
  }
}
</script>
</head>
<body onload="iniEvent()">
<!-- If the text box is empty, the text will be displayed in red " Please enter the keywords "-->
<!--<label for="txtSearch"> To find the </label>
<input type="text" id="txtSearch" value=" Please enter the keywords " 
style="color:red" />-->
 To find the <input type="text" id="txtSearch" value=" Please enter the keywords " 
style="color:red" /><br /><input type="text" />
</body>
</html>

Hopefully, this article has been helpful in your javascript programming.