该书第二版3.2.10一节中,介绍val()方法时,所用的样例代码是有共性的,而且该样例的场景模式在实际工作中会用到,所以试着优化了一下,写了一个html文本输入框得到与失去输入焦点的提示信息显示切换函数.
原书代码:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>3-10-2-2</title> <!-- 引入jQuery --> <script src="../../scripts/jquery.js" type="text/javascript"></script> <script type="text/javascript"> //<![CDATA[ $(function(){ $("#address").focus(function(){ // 地址框获得鼠标焦点 var txt_value = $(this).val(); // 得到当前文本框的值 if(txt_value==this.defaultValue){ $(this).val(""); // 如果符合条件，则清空文本框内容 } }); $("#address").blur(function(){ // 地址框失去鼠标焦点 var txt_value = $(this).val(); // 得到当前文本框的值 if(txt_value==""){ $(this).val(this.defaultValue);// 如果符合条件，则设置内容 } }) $("#password").focus(function(){ var txt_value = $(this).val(); if(txt_value==this.defaultValue){ $(this).val(""); } }); $("#password").blur(function(){ var txt_value = $(this).val(); if(txt_value==""){ $(this).val(this.defaultValue); } }) }); //]]> </script> </head> <body> <input type="text" id="address" value="请输入邮箱地址"/> <br/><br/> <input type="text" id="password" value="请输入邮箱密码"/> <br/><br/> <input type="button" value="登录"/> </body> </html>
将其中的JavaScript代码改为如下部分:
<script type="text/javascript"> //<![CDATA[ $(function(){ var toggleInputTipOnFocusBlur = function(event){ // 文本框获得鼠标焦点 if(event.type=="focus" && $(this).val()==this.defaultValue){ $(this).val(""); // 如果符合输入框内容为提示信息的条件，则清空文本框内容 } else if(event.type=="blur" && $(this).val()==""){ $(this).val(this.defaultValue);// 如果符合输入内容为空的条件，则设置内容 } }; $("#address").focus(toggleInputTipOnFocusBlur).blur(toggleInputTipOnFocusBlur); $("#password").focus(toggleInputTipOnFocusBlur).blur(toggleInputTipOnFocusBlur); }); //]]> </script>
利用函数链和固定函数名toggleInputTipOnFocusBlur,几乎可以无脑拷贝代码完成设置了.
其中要点: 事件处理函数获得的event参数,可以通过其type属性获得事件名称.