JavaScript实现输入框默认显示背景图,聚焦后消失
作者:交互手记时间:2026-10-29 12:06:03浏览:146
本文介绍如何使用JavaScript控制HTML输入框的默认背景图片显示与隐藏。通过监听onfocus和onblur事件,在用户聚焦输入框时移除背景图,失焦时若内容为空则恢复默认背景图,适用于搜索框等场景。
JavaScript实现输入框默认背景图聚焦消失
本文介绍一种利用JavaScript控制HTML输入框默认背景图片显示与隐藏的方法,供读者参考学习。
HTML结构
HTML结构如下:
<form name="searchform" id="search-form">
<div>
<b>Search</b>
<input type="text" name="txtInput"
title="Enter the terms you wish to search for." />
<input type="submit" value="GO!" class="submit"
style="cursor: pointer;" />
</div>
</form>
JavaScript实现逻辑
JavaScript实现逻辑如下:
<script type="text/javascript" language="javascript">
(function() {
var id = document.getElementById('search-form');
if (id && id.txtInput) {
var name = id.txtInput;
var unclicked = function() {
if (name.value == '') {
name.style.background = '#FFFFFF url(images/googbg.png) left no-repeat';
}
};
var clicked = function() {
name.style.background = '#ffffff';
};
name.onfocus = clicked;
name.onblur = unclicked;
unclicked();
}
})();
</script>
希望本文所述对大家的javascript程序设计有所帮助。
作者最新文章
JS怎么实现页面强制刷新
2026-11-05 14:53:38
点击JS链接直接运行不下载?前端实现.js文件强制下载的三种方法
2026-11-05 12:12:23
怎么封装一个通用的JS创建元素辅助函数
2026-11-05 11:41:41
Swiper.js 怎么监听滑动结束并获取当前索引
2026-11-05 10:57:15
HTML、CSS和JS的关系:Web前端三件套怎么协作
2026-11-04 15:41:40
相关标签:
