javascript和jquery实现设置和移除文本框默认值效果

JavaScript与jQuery在文本框默认值设置与移除的奇妙之旅

在网页设计中，我们时常需要设置文本框的默认值，以给予用户一些提示或引导。这种效果类似于HTML5中的placeholder属性，即空白提示。今天，我将带你领略如何使用JavaScript和jQuery来实现这一功能，并带来生动丰富的体验。

一、基础方法：使用HTML的onfocus和onblur属性

最简单的方式，莫过于直接在input标签中使用onfocus和onblur属性。当元素获取焦点时，我们可以判断其值是否为默认值，并对其进行更改。当元素失去焦点时，如果值为空，则重置为默认值。

示例代码如下：

```html

onfocus='if(this.value=="请输入关键字进行搜索"){this.value="";}; this.className="input01"'

onblur='if(this.value==""){this.value="请输入关键字进行搜索";}; this.className="input02"'/>

```

我们还可以利用onfocus属性来改变元素的CSS样式，使得元素在获取焦点时呈现出不同的视觉效果。

二、进阶技巧：使用jQuery实现更强大的功能

除了使用基础的方法外，我们还可以借助强大的jQuery库来实现更复杂的功能。以下是一个简单的示例：

```javascript

$(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);

}

});

});

```

这只是我使用过的其中两种方法，实现的方式还有很多种。你可以根据自己的需求和喜好选择适合的方法。无论是使用基础的方法还是借助jQuery，都能达到设置和移除文本框默认值的效果，带给用户更友好的体验。如果你对此感兴趣，不妨深入一下JavaScript和jQuery的更多功能，你会发现它们的世界是如此丰富多彩。