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 相关文章推荐
JavaScript更改class和id的方法
Oct 10 Javascript
JavaScript NodeTree导航栏(菜单项JSON类型/自制)
Feb 01 Javascript
javascript中数组的冒泡排序使用示例
Dec 18 Javascript
JavaScript中用sort()方法对数组元素进行排序的操作
Jun 09 Javascript
JavaScript变量的作用域全解析
Aug 14 Javascript
JavaScript和HTML DOM的区别与联系及Javascript和DOM的关系
Nov 15 Javascript
浅析node连接数据库(express+mysql)
Nov 30 Javascript
浅谈jquery设置和获得checkbox选中的问题
Aug 19 Javascript
Bootstrap3 模态框使用实例
Feb 22 Javascript
基于JavaScript实现微信抢红包功能
Jul 20 Javascript
用vue封装插件并发布到npm的方法步骤
Oct 18 Javascript
微信小程序 WeUI扩展组件库的入门教程
Apr 21 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
PHP文件去掉PHP注释空格的函数分析(PHP代码压缩)
2013/07/02 PHP
PHP Global定义全局变量使用说明
2013/08/15 PHP
PHP与服务器文件系统的简单交互
2016/10/21 PHP
YII框架中使用memcache的方法详解
2017/08/02 PHP
搜索附近的人PHP实现代码
2018/02/11 PHP
PHP abstract 抽象类定义与用法示例
2018/05/29 PHP
JavaScript函数、方法、对象代码
2008/10/29 Javascript
JS小框架 fly javascript framework
2009/11/26 Javascript
基于jQuery的消息提示插件之旅 DivAlert(三)
2010/04/01 Javascript
ExtJS下 Ext.Direct加载和提交过程排错小结
2013/04/02 Javascript
jquery禁用右键示例
2014/04/28 Javascript
node.js中的path.delimiter方法使用说明
2014/12/09 Javascript
jQuery中[attribute*=value]选择器用法实例
2014/12/31 Javascript
jQuery操作JSON的CRUD用法实例
2015/02/25 Javascript
JavaScript数据类型学习笔记分享
2016/09/01 Javascript
JS原型链 详解及示例代码
2016/09/06 Javascript
移动端触摸滑动插件swiper使用方法详解
2017/08/11 Javascript
JS运动改变单物体透明度的方法分析
2018/01/23 Javascript
Koa2微信公众号开发之本地开发调试环境搭建
2018/05/16 Javascript
微信小程序网络封装(简单高效)
2018/08/06 Javascript
React中this丢失的四种解决方法
2019/03/12 Javascript
Vue基础学习之项目整合及优化
2019/06/02 Javascript
LayUI动态设置checkbox不显示的解决方法
2019/09/02 Javascript
vue-cli随机生成port源码的方法
2019/09/02 Javascript
[50:12]EG vs Fnatic 2018国际邀请赛小组赛BO2 第二场 8.19
2018/08/21 DOTA
[03:30]完美盛典趣味短片 CSGO2019年度名场面
2019/12/07 DOTA
shelve  用来持久化任意的Python对象实例代码
2016/10/12 Python
python递归打印某个目录的内容(实例讲解)
2017/08/30 Python
pyqt5 QProgressBar清空进度条的实例
2019/06/21 Python
pytorch实现查看当前学习率
2020/06/24 Python
Python并发爬虫常用实现方法解析
2020/11/19 Python
python中pdb模块实例用法
2021/01/15 Python
世界上最好的旅行夹克:BauBax
2018/12/23 全球购物
应届毕业生个人自我评价
2013/09/20 职场文书
2014年个人总结范文
2015/03/09 职场文书
导游词之晋城蟒河
2019/12/12 职场文书