• 欢迎访问开心洋葱网站,在线教程,推荐使用最新版火狐浏览器和Chrome浏览器访问本网站,欢迎加入开心洋葱 QQ群
  • 为方便开心洋葱网用户,开心洋葱官网已经开启复制功能!
  • 欢迎访问开心洋葱网站,手机也能访问哦~欢迎加入开心洋葱多维思维学习平台 QQ群
  • 如果您觉得本站非常有看点,那么赶紧使用Ctrl+D 收藏开心洋葱吧~~~~~~~~~~~~~!
  • 由于近期流量激增,小站的ECS没能经的起亲们的访问,本站依然没有盈利,如果各位看如果觉着文字不错,还请看官给小站打个赏~~~~~~~~~~~~~!

JavaScript在文本框中默认显示图片背景,获得焦点后消失的代码

JavaScript 水墨上仙 2011次浏览

JavaScript在文本框中默认显示图片背景,获得焦点后消失的代码
效果演示:http://css-tricks.com/examples/InputWithBackgroundImage/

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>

JS代码

<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在文本框中默认显示图片背景,获得焦点后消失的代码
喜欢 (0)
加载中……