JavaScript实现文本框中默认显示背景图片在获得焦点后消失的方法


Posted in Javascript onJuly 01, 2015

本文实例讲述了JavaScript实现文本框中默认显示背景图片在获得焦点后消失的方法。分享给大家供大家参考。具体如下:

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

Javascript 相关文章推荐
JS 文字符串转换unicode编码函数
May 30 Javascript
js AspxButton的客户端操作
Jun 26 Javascript
js输出列表实现代码
Sep 12 Javascript
简单易用的倒计时js代码
Aug 04 Javascript
超级好用的jQuery圆角插件 Corner速成
Aug 31 Javascript
使用JavaScript实现弹出层效果的简单实例
May 31 Javascript
jQuery事件绑定用法详解
Sep 08 Javascript
Vue.js学习之计算属性
Jan 22 Javascript
原生JavaScript实现的简单省市县三级联动功能示例
May 27 Javascript
JS实现的base64加密解密操作示例
Apr 18 Javascript
vue 解除鼠标的监听事件的方法
Nov 13 Javascript
vue瀑布流组件实现上拉加载更多
Mar 10 Javascript
JavaScript判断数组是否包含指定元素的方法
Jul 01 #Javascript
在JavaScript应用中使用RequireJS来实现延迟加载
Jul 01 #Javascript
使用RequireJS优化JavaScript引用代码的方法
Jul 01 #Javascript
优化RequireJS项目的相关技巧总结
Jul 01 #Javascript
JavaScript的RequireJS库入门指南
Jul 01 #Javascript
Backbone.js的一些使用技巧
Jul 01 #Javascript
JavaScript框架是什么?怎样才能叫做框架?
Jul 01 #Javascript
You might like
在PHP3中实现SESSION的功能(二)
2006/10/09 PHP
How do I change MySQL timezone?
2008/03/26 PHP
ThinkPHP CURD方法之data方法详解
2014/06/18 PHP
新浪SAE搭建PHP项目教程
2015/01/28 PHP
PHP房贷计算器实例代码,等额本息,等额本金
2017/04/01 PHP
jquery控制listbox中项的移动并排序的实现代码
2010/09/28 Javascript
Jquery数独游戏解析(一)-页面布局
2010/11/05 Javascript
Javascript变量函数浅析
2011/09/02 Javascript
jQuery中replaceAll()方法用法实例
2015/01/16 Javascript
javascript常用经典算法实例详解
2015/11/25 Javascript
使用vue.js制作分页组件
2016/06/27 Javascript
JavaScript实现鼠标滚轮控制页面图片切换功能示例
2017/10/14 Javascript
解决vue中无法动态修改jqgrid组件 url地址的问题
2018/03/01 Javascript
微信小程序实现星级评分和展示
2018/07/05 Javascript
微信小程序局部刷新触发整页刷新效果的实现代码
2018/11/21 Javascript
原生js实现照片墙效果
2020/10/13 Javascript
[07:27]DOTA2卡尔工作室 英雄介绍水晶室女篇
2013/06/21 DOTA
[03:48]显微镜下的DOTA2第四期——TP动作
2014/06/20 DOTA
[01:00:25]NB vs Secret 2018国际邀请赛小组赛BO1 B组加赛 8.19
2018/08/21 DOTA
Python使用新浪微博API发送微博的例子
2014/04/10 Python
Python线程中对join方法的运用的教程
2015/04/09 Python
python 创建弹出式菜单的实现代码
2017/07/11 Python
Python基于回溯法子集树模板解决选排问题示例
2017/09/07 Python
用python3教你任意Html主内容提取功能
2018/11/05 Python
PyQt5实现简单数据标注工具
2019/03/18 Python
python实现人机五子棋
2020/03/25 Python
浅谈Django前端后端值传递问题
2020/07/15 Python
python如何调用百度识图api
2020/09/29 Python
英国领先的亚洲旅游专家:Wendy Wu Tours
2018/01/21 全球购物
读群众路线心得体会
2014/03/07 职场文书
低碳日宣传活动总结
2014/07/09 职场文书
教师民族团结演讲稿
2014/08/27 职场文书
党员自我评价范文2015
2015/03/03 职场文书
2015年端午节活动方案
2015/05/05 职场文书
Vue接口封装的完整步骤记录
2021/05/14 Vue.js
HTML中的表格元素介绍
2022/02/28 HTML / CSS