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 web页面刷新的方法收集
Jul 02 Javascript
jQuery图片轮播的具体实现
Sep 11 Javascript
jquery mobile的触控点击事件会多次触发问题的解决方法
May 08 Javascript
JavaScript更改原始对象valueOf的方法
Mar 19 Javascript
浅谈String.valueOf()方法的使用
Jun 06 Javascript
JS弹出窗口插件zDialog简单用法示例
Jun 12 Javascript
jQuery事件处理的特征(事件命名机制)
Aug 23 Javascript
Javascript 链式作用域详细介绍
Feb 23 Javascript
Vue中的scoped实现原理及穿透方法
May 15 Javascript
angular 数据绑定之[]和{{}}的区别
Sep 25 Javascript
JS实现的小火箭发射动画效果示例
Dec 08 Javascript
迅速了解一下ES10中Object.fromEntries的用法使用
Mar 05 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变量的值类型和引用类型
2015/10/21 PHP
header与缓冲区之间的深层次分析
2016/07/30 PHP
PHP从二维数组得到N层分类树的实现代码
2016/10/11 PHP
php从数据库读取数据,并以json格式返回数据的方法
2018/08/21 PHP
laravel 解决Validator使用中出现的问题
2019/10/25 PHP
laravel5.6框架操作数据curd写法(查询构建器)实例分析
2020/01/26 PHP
PHP pthreads v3下同步处理synchronized用法示例
2020/02/21 PHP
根据出生日期自动取得星座的js代码
2010/07/20 Javascript
原生js做的手风琴效果的导航菜单
2013/11/08 Javascript
详细介绍jQuery.outerWidth() 函数具体用法
2015/07/20 Javascript
跟我学习JScript的Bug与内存管理
2015/11/18 Javascript
Angularjs 实现一个幻灯片示例代码
2016/09/08 Javascript
vue项目部署上线遇到的问题及解决方法
2018/06/10 Javascript
vue项目打包部署到服务器的方法示例
2018/08/27 Javascript
vue写h5页面的方法总结
2019/02/12 Javascript
JS中数据结构与算法---排序算法(Sort Algorithm)实例详解
2019/06/17 Javascript
原生js无缝轮播插件使用详解
2020/03/09 Javascript
python查询sqlite数据表的方法
2015/05/08 Python
SVM基本概念及Python实现代码
2017/12/27 Python
python 执行文件时额外参数获取的实例
2018/12/18 Python
python调用其他文件函数或类的示例
2019/07/16 Python
基于python 微信小程序之获取已存在模板消息列表
2019/08/05 Python
pytorch常见的Tensor类型详解
2020/01/15 Python
Python简单实现词云图代码及步骤解析
2020/06/04 Python
python脚本第一行如何写
2020/08/30 Python
使用Python快速打开一个百万行级别的超大Excel文件的方法
2021/03/02 Python
伦敦最有品味的百货:Liberty London
2016/11/12 全球购物
J2EE模式面试题
2016/10/11 面试题
英语专业毕业生自我鉴定
2013/11/09 职场文书
《生命的药方》教学反思
2014/04/08 职场文书
党委工作总结2015
2015/04/27 职场文书
火烧圆明园观后感
2015/06/03 职场文书
2015年度优秀员工获奖感言
2015/07/31 职场文书
《我和小伙伴》教学反思
2016/02/20 职场文书
小学教代会开幕词
2016/03/04 职场文书
css filter和getUserMedia的联合使用
2022/02/24 HTML / CSS