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

本文实例讲述了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程序设计有所帮助。

赞 (0)

相关推荐

  • js控制TR的显示隐藏

    js控制TR的显示隐藏

    下文分享的一段代码:选择是的按钮就显示身高和体重的文本框的代码.注意:ready方法必须要引用jquery的库. 1.html Code <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>无标题文档</title> <style type="text/css&

  • js显示文本框提示文字的方法

    本文实例讲述了js显示文本框提示文字的方法.分享给大家供大家参考.具体实现方法如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <

  • Extjs TriggerField在弹出窗口显示不出问题的解决方法

    一.原因分析 this.WinData.AutoLoad.Mode = LoadMode.IFrame; WinData.AnimateTarget = "BtnEdit"; PHWin.Controls.Add(WinData); 使用PlaceHolder让窗口弹出具有动画效果 二.解决方案 this.WinData.AutoLoad.Mode = LoadMode.IFrame; 去掉动画效果即可

  • js tr控制下面的tbody隐藏和显示

    用的核心代码function $(obj){     return document.getElementById(obj); } window.onload = function(){     var table = document.getElementById("myTable");     //如果在表格区域内产生单击     table.onclick = function(e){         var e = window.event||e,target = e.srcE

  • js简单实现让文本框内容逐个字的显示出来

    复制代码 代码如下: <script language="JavaScript"> <!-- function MArray() { this.length = MArray.arguments.length for (var i = 0; i < this.length; i++) this[i+1] = MArray.arguments[i]} var fArray = new MArray; fArray[0]="欢迎大家学习javascript

  • js中点击空白区域时文本框与隐藏层的显示与影藏问题

    当文本框获得焦点的时候,在文本框的下方显示一个浮动层. 当用户点击除了文本框和浮动层以外的网页空白处时,要隐藏浮动层. 当用户点击浮动层时,改变文本框的值. 复制代码 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <head> <

  • js 文本框里粘贴一个图片url并显示

    请输入图片地址: [Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]

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

    本文实例讲述了JavaScript实现文本框中默认显示背景图片在获得焦点后消失的方法.分享给大家供大家参考.具体如下: html代码: <form name="searchform" id="search-form"> <div> <b>Search</b> <input type="text" name="txtInput" title="Enter the t

  • javascript 设置文本框中焦点的位置

    复制代码 代码如下: var obj=document.getElementById("txtUserID") var range=obj.createTextRange() //选中文本的起始位置(从第3个字符之后开始) range.moveStart("character",3) //选中文本的结束位置(到全部字符的倒第3个之前) range.moveEnd("character",-3) //选中 range.select()

  • javascript记录文本框内文字个数检测文字个数变化

    最近在做一个项目中遇到这样一个问题,要对文本框中用户输入的文字进行记数,在下面显示出来,因为我们做的是一个短信发送平台,现在我们国家的短信服务,如果你的信息超过了70个字符,短信就会按二条给你下发.所以要求我们给用户显示他输入了多少个字.好便于用户知道我条信息会分几条给出. 在网了一个代码,放上去,开始使用的时候,还行,不错,可是使用了一段时间后发现了问题.就是你在删除文字后,上面的字数变化就有问题,后来研究了一下,找到问题的所在.onKeyDown="showLen(this)" o

  • JavaScript自定义文本框光标

    文本框(input或textarea)的光标无法修改样式(除了通过color修改光标颜色).但笔者希望个人创建自己的网站时,文本框的光标有属于自己的风格.所以,尝试模拟文本框的光标,设计有自己风格的光标.以下是笔者个人的想法. [************************基本思路***************************] 对于键盘操作来说,光标的基本操作不外乎最基本的三个键:左箭头(left arrow).右箭头(right arrow)和退格键(backspace). 左箭

  • jquery文本框中的事件应用以输入邮箱为例

    jquery文本框中的事件应用以输入邮箱为例

    文本框中的事件应用:以输入邮箱为例,如图: 代码如下: 复制代码 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head

  • javascript设置文本框光标的方法实例小结

    本文实例总结了javascript设置文本框光标的方法.分享给大家供大家参考,具体如下: 对于text //得到光标位置 function getCaret(textbox) { var control = document.activeElement; textbox.focus(); var rang = document.selection.createRange(); rang.setEndPoint("StartToStart",textbox.createTextRange

  • C#设置Word文本框中改变文字方向的方法

    C#设置Word文本框中改变文字方向的方法

    在Word中可插入文本框,默认情况下插入的文本框中的文字方向为横向排列,对于一些特殊文档的设计要求,需要改变文字方向,如本次测试中的文档排版为考生试卷类型,考生信息栏的内容为下图中的这种, 本文将以C#程序代码为例,展示如何来实现这种排版.另附VB.NET代码供参考. 测试程序环境如下: Visual Studio 2017 .net framework 4.8 Free spire.doc.dll 7.11 测试word文档:.docx2013 关于dll安装:在程序中通过nuget搜索Fre

  • JavaScript获取文本框内选中文本的方法

    本文实例讲述了JavaScript获取文本框内选中文本的方法.分享给大家供大家参考.具体分析如下: 这里的代码可以用来获取用户通过鼠标在文本输入框或者textarea里选择的选本. 需要注意ie的问题. 代码如下: 复制代码 代码如下: <script type="text/javascript"> function getFieldSelection(select_field) {     word='';     if (document.selection) {   

  • javascript限制文本框输入值类型的方法

    本文实例讲述了javascript限制文本框输入值类型的方法.分享给大家供大家参考.具体分析如下: 要求:所有的文本框,只能输入数字和小数点,其他的符号一概不能输入: 重点是我希望在用户输入时就做限制,而不是提交时判断--也就是说如果用户在文本框内输入数字或小数点,可以正常输入:如果输入字母等非数字字符,则文本框会没有任何反应,不会显示输入的字符. <html> <body> <script> var s = "<input type=\"te

  • js实现文本框中输入文字页面中div层同步获取文本框内容的方法

    本文实例讲述了js实现文本框中输入文字页面中div层同步获取文本框内容的方法.分享给大家供大家参考.具体实现方法如下: 复制代码 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.o

随机推荐