JavaScript实现文本框中默认显示背景图片在获得焦

本文将向您展示如何使用JavaScript实现一个功能：在文本框中默认显示背景图片，并在用户点击文本框后消失。这一技巧涉及到了JavaScript对页面元素样式及属性的操作。

我们在HTML中创建一个简单的表单，包含一个文本框和提交按钮。这个文本框将用于展示我们的功能。

HTML代码如下：

```html

```

接下来，我们使用JavaScript来实现功能。我们获取表单元素和其中的文本框元素。然后，我们为文本框元素设置两个事件处理函数：一个是在文本框获得焦点时触发，一个是在文本框失去焦点时触发。

当文本框未获得焦点时，我们检查文本框的值是否为空。如果为空，则设置背景图片。当文本框获得焦点时，我们清除背景图片。这样，背景图片就会在文本框获得焦点后消失。

JavaScript代码如下：

```javascript

(function() {

var form = document.getElementById('search-form');

if (form && form.txtInput) {

var input = form.txtInput;

var unclicked = function() {

if (input.value === '') {

input.style.background = 'FFFFFF url(images/googbg.png) left no-repeat';

}

};

var clicked = function() {

input.style.background = 'ffffff';

};

input.onfocus = clicked; // 当文本框获得焦点时触发函数

input.onblur = unclicked; // 当文本框失去焦点时触发函数

unclicked(); // 初始设置背景图片

}

})();

```

现在，每当用户点击文本框时，背景图片就会消失。而当文本框失去焦点时（例如用户点击其他地方），如果文本框为空，背景图片就会重新出现。这就是使用JavaScript实现文本框中默认显示背景图片在获得焦点后消失的方法。希望本文能对您的JavaScript程序设计有所帮助。