jquery实现文本框得到失去焦点

爱被打了一巴掌 2022-08-07 04:33 229阅读 0赞

《锋利的jquery一书》中的用jquery实现文本框得到失去焦点的效果，效果如图：

![Center][]

结构是一个简单的表单，html里用到了fieldset及legend这两个表现来实现半外边框的效果。fieldset里分别放了三个div来放三个表单，名称用了label属性，后面用了input及textarea，代码如下：

<form action="" method="post" id="regForm">
    		<fieldset>
    			<legend>个人基本信息</legend>
    				<div>
    					<label  for="username">名称:</label>
    					<input id="username" type="text" value="名称" />
    				</div>
                    <div>
    					<label for="pass">密码:</label>
    					<input id="pass" type="password" value="密码" />
    				</div>
                    <div>
    					<label for="msg">详细信息:</label>
    					<textarea id="msg" rows="2" cols="20">详细信息</textarea>
    				</div>
    		</fieldset>
    	</form>

**jquery代码主要是给表单的元素添加得到焦点focus及失去焦点blur这两个事件。注意这里选取表单的所有元素用的是$(":input")。注意jquery选择器里:表示是什么的，\[ \]表示有什么的，如：比如 $("tr:first") 表示的是tr是first的是哪些，$(":input") 是input的是那些，$("div\[id\]") 表示的是有id属性的div有哪些。**

而这里的$(":input") 返回form中的所有表单对象,包括textarea、select、button等。在focus及blur事件里分别添加及移除相应的得到或失去焦点的效果。在得到焦点时判断当前表单元素的值是否等于默认值，如果等于，则让它为空；而在失去焦点时判断当前表单元素的值是否为空，如果为空，则给它赋默认值。这里学习了jquery如何取得表单的值及如何为其赋值的方法，这里还结合了JS的方法this.defaultValue，表单的默认值，代码如下：

$(":input").focus(function(){
    			  $(this).addClass("focus");
    			  if($(this).val() ==this.defaultValue){  
                      $(this).val("");           
    			  } 
    		}).blur(function(){
    			 $(this).removeClass("focus");
    			 if ($(this).val() == '') {
                    $(this).val(this.defaultValue);
                 }
    		});

[Center]: /images/20220805/7700353db5344edc9a26c17e142b4b6c.png