本文详细解析如何在JavaScript原生HTML属性与jQuery库中处理文本框的焦点事件。通过对比onFocus/onblur内联写法与jQuery的focus()/blur()方法，结合具体代码实例，展示如何实现输入框提示语的动态显示与隐藏，帮助开发者掌握表单交互的核心技巧。
原生JavaScript内联焦点处理
首先介绍一种直接在HTML input元素中编写JavaScript代码的方式。
具体实现代码如下：
<input name="pwuser" type="text" id="pwuser" class="input" value="楼盘账号" onBlur="if(this.value=='') this.value='楼盘账号';" onFocus="if(this.value=='楼盘账号') this.value='';" />
<input name="pwpwd" type="password" class="input1" value="******" onBlur="if(this.value=='') this.value='******';" onFocus="if(this.value=='******') this.value='';">使用jQuery实现上述功能的方法
jQuery焦点函数focus与blur用法
针对HTML元素的焦点事件处理，jQuery提供了专门的focus()和blur()函数。
focus()函数用于元素获得焦点时的操作，其功能等同于JavaScript中的onfocus事件。
例如：
代码示例如下：
$("p").focus(); 或 $("p").focus(fn)blur()函数用于元素失去焦点时的操作，行为与onblur一致。
例如：
代码示例如下：
$("p").blur(); 或 $("p").blur(fn)jQuery焦点处理完整实例
下面通过一个具体实例进行演示。
HTML结构代码如下：
<form>
<label for="searchKey" id="lbSearch">搜神马？</label> 此处label标签覆盖在文本框上方，有助于更精细地控制样式布局。
<input id="searchKey" type="text" />
<input type="submit" value="搜索" />
</form>对应的jQuery脚本代码如下：
具体实现代码：
$(function() {
$('#searchKey').focus(function() {
$('#lbSearch').text('');
});
$('#searchKey').blur(function() {
var str = $(this).val();
str = $.trim(str);
if(str == '')
$('#lbSearch').text('搜神马？');
});
}) 这种实现方式效果相当不错。