This article mainly introduces jQuery's simple implementation of the gray text prompt text effect in the input text box. it involves jQuery's page element traversal and style dynamic operation skills and has some reference value, for more information about jQuery, see the following example. We will share this with you for your reference. The details are as follows:
$ (Function () {$ (". grayTips "). each (function () {// traverse each text box var objTextBox =$ (this); var oldText =$. trim (objTextBox. val (); objTextBox.css ("color", "#888"); objTextBox. focus (function () {if (objTextBox. val ()! = OldText) {objTextBox.css ("color", "#000");} else {objTextBox. val ("" ).css ("color", "#888") ;}}); objTextBox. blur (function () {if (objTextBox. val () = "") {objTextBox.val(oldText).css ("color", "#888") ;}}); objTextBox. keydown (function () {objTextBox.css ("color", "#000 ");});});});
Note: The jquery. js file input and TextBox files must be introduced.
$(function(){ $(".grayTip").each(function(){ var $input=$(this); $input.css("color","#888"); var oldText=$.trim($input.val()); $input.focus(function(){ var newText=$.trim($input.val()); if (newText==oldText){ $input.val(""); } $input.css("color","#000"); }); $input.blur(function(){ var newText=$.trim($input.val()); if(newText==""){ $input.val(oldText); $input.css("color","#888"); } }); }); });
I hope this article will help you with jQuery programming.