JavaScript与jQuery实现文本框默认值显示与清除功能

文本框默认值效果实现原理

本文旨在实现文本框默认值的设置与移除效果，具体表现为当鼠标点击进入文本框时，灰色的提示文字自动消失。

原生HTML onfocus/onblur属性实现

第一种方法是通过在input标签中直接添加onfocus属性来实现，示例代码如下：

<input id="keyword" name="keyword" size="10" class="inputstyle keywords" value="请输入关键字进行搜索"
onfocus='if(this.value=="请输入关键字进行搜索"){this.value="";}; '
onblur='if(this.value==""){this.value="请输入关键字进行搜索";};'>

onfocus属性不仅可用于值处理，还可用于动态改变CSS样式，具体实现代码如下：

<input id="keyword" name="keyword" size="10" class="inputstyle keywords" value="请输入关键字进行搜索"
onfocus='if(this.value=="请输入关键字进行搜索"){this.value="";}; this.className="input01"'
onblur='if(this.value==""){this.value="请输入关键字进行搜索";}; this.className="input02"'>

jQuery事件监听实现方案

第二种方法是利用jQuery库来实现相同的功能，示例代码如下：

$(document).ready(function() {
var vdefault = $('#keyword').val();
$('#keyword').focus(function() {
 //获得焦点时，如果值为默认值，则设置为空
 if ($(this).val() == vdefault) {
 $(this).val("");
 }
 });
 $('#keyword').blur(function() {
 //失去焦点时，如果值为空，则设置为默认值
 if ($(this).val()== "") {
 $(this).val(vdefault); ;
 }
 });
});

当然，实现该功能的方式还有很多种，此处仅列举了作者实际使用过的两种方案。