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程序设计有所帮助。

作者最新文章