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 相关文章推荐
点击广告后才能获得下载地址
Oct 26 Javascript
javascript 对表格的行和列都能加亮显示
Dec 26 Javascript
js脚本获取webform服务器控件的方法
May 16 Javascript
jQuery团购倒计时特效实现方法
May 07 Javascript
JavaScript数组去重的五种方法
Nov 05 Javascript
jquery判断复选框选中状态以及区分attr和prop
Dec 18 Javascript
关于Vue.js 2.0的Vuex 2.0 你需要更新的知识库
Nov 30 Javascript
node.js到底要不要加分号浅析
Jul 11 Javascript
vue实现未登录跳转到登录页面的方法
Jul 17 Javascript
关于Layui Table隐藏列问题
Sep 16 Javascript
在vue中使用回调函数,this调用无效的解决
Aug 11 Javascript
vue动态设置页面title的方法实例
Aug 23 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中用socket模拟http中post或者get提交数据的示例代码
2013/08/08 PHP
thinkphp配置连接数据库技巧
2014/12/02 PHP
PHP实现将MySQL重复ID二维数组重组为三维数组的方法
2016/08/01 PHP
php实现基于pdo的事务处理方法示例
2017/07/21 PHP
php使用环形链表解决约瑟夫问题完整示例
2018/08/07 PHP
验证javascript中Object和Function的关系的三段简单代码
2010/06/27 Javascript
js实现div闪烁原理及实现代码
2014/06/24 Javascript
JavaScript实现瀑布流布局
2020/06/28 Javascript
使用JavaScript实现ajax的实例代码
2016/05/11 Javascript
把json格式的字符串转换成javascript对象或数组的方法总结
2016/11/03 Javascript
微信小程序开发经验总结(推荐)
2017/01/11 Javascript
使用jQuery的load方法设计动态加载及解决被加载页面js失效问题
2017/03/01 Javascript
JS实现向iframe中表单传值的方法
2017/03/24 Javascript
详解在不使用ssr的情况下解决Vue单页面SEO问题
2018/11/08 Javascript
详解Angular模板引用变量及其作用域
2018/11/23 Javascript
Vue组件的使用及个人理解与介绍
2019/02/09 Javascript
vue中格式化时间过滤器代码实例
2019/04/17 Javascript
微信小程序实现多行文字超出部分省略号显示功能
2019/10/23 Javascript
[02:16]卖萌的僵尸 DOTA2神话信使飞僵小宝来袭
2014/03/24 DOTA
[01:16:50]DOTA2-DPC中国联赛 正赛 Phoenix vs CDEC BO3 第一场 3月7日
2021/03/11 DOTA
二种python发送邮件实例讲解(python发邮件附件可以使用email模块实现)
2013/12/03 Python
PyQt5每天必学之组合框
2018/04/20 Python
Python读取本地文件并解析网页元素的方法
2018/05/21 Python
Django自定义用户表+自定义admin后台中的字段实例
2019/11/18 Python
python使用opencv resize图像不进行插值的操作
2020/07/05 Python
Autopep8的使用(python自动编排工具)
2021/03/02 Python
html5自带表单验证体验优化及提示气泡修改功能
2017/09/12 HTML / CSS
字中字效果的实现【html5实例】
2016/05/03 HTML / CSS
BIBLOO捷克:购买女装、男装、童装、鞋和配件
2017/01/27 全球购物
全球速卖通法国在线交易平台:AliExpress法国
2017/07/07 全球购物
中学生秋季运动会广播稿
2014/09/21 职场文书
护理医院见习报告
2014/11/03 职场文书
2015年事业单位办公室文员工作总结
2015/04/24 职场文书
辩论赛主持人开场白
2015/05/29 职场文书
MySQL多表查询机制
2022/03/17 MySQL
Win11如何默认打开软件界面最大化?Win11默认打开软件界面最大化的方法
2022/07/15 数码科技