效果图如下：

<!-- 当文本框获得焦点时候，如果文本框内容是 请输入搜索关键字  清空文本框，输入内容变黑色 -->

<!-- 当文本框失去焦点时候，如果文本框无内容，则添加灰色的 请输入搜索关键字 内容，否则，不改变 -->

注意事件：

1、点击焦点事件----onfouce

2、失去焦点事件----onblur

3、对于元素属性的访问，class，应该是元素名.className

代码如下：

 <!DOCTYPE html>

 <html>

     <head lang="en">

         <meta charset="UTF-8">

         <title>文本框的焦点事件</title>

         <style type="text/css">

             /* 灰色 */

             .gray{

                 color: gray;

             }

             /* 黑色 */

             .black{

                 color: black;

             }

         </style>

     </head>

     <body>

         <!-- 当文本框获得焦点时候，如果文本框内容是 请输入搜索关键字  清空文本框，输入内容变黑色 -->

         <!-- 当文本框失去焦点时候，如果文本框无内容，则添加灰色的 请输入搜索关键字 内容，否则，不改变 -->

         <input type="text" id="txtSearch" class="gray" value="请输入搜索关键字" />

         <!-- 添加JS效果 -->

         <script type="text/javascript">

             //获得文本框元素

             var txtSearch=document.getElementById('txtSearch');

             //文本框得到焦点事件 onfocus()

             txtSearch.onfocus=function(){

                 if(this.value==='请输入搜索关键字'){//判断

                     this.className='black';

                     this.value='';

                 }

             }

             //文本框失去焦点事件 onblur()

             txtSearch.onblur=function(){

                 if(this.value.length==0){

                     this.value='请输入搜索关键字';

                     this.className='gray';

                 }

             }

         </script>

     </body>

 </html>

JavaScript文本框焦点事件的更多相关文章

  1. javascript 文本框值变化触发事件

    javascript 文本框值变化触发事件jo.find(".price").bind('input onpropertychange', function () { me.cal ...

  2. (三)在js(jquery)中获得文本框焦点和失去焦点的方法

    在js(jquery)中获得文本框焦点和失去焦点的方法   文章介绍两个方法和种是利用javascript onFocus onBlur来判断焦点和失去焦点,加一种是利用jquery $(" ...

  3. jQuery登录界面的文本框焦点代码

    <script type="text/javascript"> $(function(){ $("#address").focus(function ...

  4. 点击Enter键，文本框焦点改变 分类： WinForm 2014-04-15 10:30 223人阅读 评论(0) 收藏

    一个例子: 一个简单的 登陆界面,有用户名.密码文本框.登陆按钮.  想要实现的效果是,用户输入用户名之后,点击Enter键进入到下一个文本框,同理,输入完密码之后,登陆按钮获得焦点,再次点击Ente ...

  5. jquery div 下拉框焦点事件

    这章与上一张<jquery input 下拉框(模拟select控件)焦点事件>类似 这章讲述div的焦点事件如何使用 div的焦点事件与input的焦点事件区别在于 需要多添加一个属性: ...

  6. 文本框按键事件onkeydown、onkeypress、onkeyup区别

    当我们在搜索时,会用到这几个事件 onkeydown 是指鼠标按下的那一刻,此时用户不知道按了什么,文本框也不会显示,首先触发的事件 onkeypress 是指鼠标按下然后松开的瞬间,此时仍然获取不到 ...

  7. JavaScript搜索框响应事件

    HTML页面,注意:不要使用form标签 <input type = "text" name="keyword" id="keyword&quo ...

  8. javascript 文本框中,判断回车键触发事件 兼容IE&FireFox

    1.onkeypress&onkeydown区别 onkeypress 事件在用户按下并放开任何字母数字键时发生.但是系统按钮(例如:箭头键.功能键)无法得到识别. onkeydown 事件在 ...

  9. jQuery中的bind绑定事件与文本框改变事件的临时解决方法

    暂时没有想到什么好的解决办法,我现在加了个浏览器判断非ie的话就注册blur事件,这样有个问题就是blur实在别的控件活动焦点的时候,txtStation控件注册的方法是为了填充它紧挨着的一个下拉列表 ...

随机推荐

  1. vue1.0 与 Vue2.0的一些区别 及用法

    1.Vue2.0的模板标记外必须使用元素包起来: eg:Vue1.0的写法 <!DOCTYPE html> <html> <head> <meta chars ...

  2. android launcher

    1.android_launcher的源码详细分析 2.android---launcher 3.Android 4.4 Launcher3桌面源码分析 4.通过深度剖析Android之Launche ...

  3. NGUI动态字体的使用

    LZ今年六月刚刚毕业,在学校跟着老师做Android,OpenGL ES方面的项目(说白了就是干苦力╮(╯_╰)╭).年后来SZ了,就业前景好像并没有电视上渲染的那样糟糕,至少IT行业是这样吧,只要你 ...

  4. C#实现Stream与byte[]之间的转换实例教程

    一.二进制转换成图片 MemoryStream ms = new MemoryStream(bytes); ms.Position = ; Image img = Image.FromStream(m ...

  5. SQL Server ->> 生成时间类型的Partition Function和Partition Scheme代码

    有时工作中要建个分区函数,可是像日期这种分区函数要是搞个几百个的值那不是要搞死我.于是写了点代码自动生成一个从1990年开始的按月的分区函数和对应的分区主题 USE [TestDB] GO DECLA ...

  6. Oracle DG 三种模式（转）

    DG有下面三种模式– Maximum protection– Maximum availability– Maximum performance 在Maximum protection下, 可以保证从 ...

  7. Centos6.5(Linux)安装Nginx

    1.安装nginx依赖的库pcre       下载地址:http://sourceforge.net/projects/pcre/    2.解压pcre        zip解压方式:unzip ...

  8. BZOJ1820:[JSOI2010]Express Service 快递服务(DP)

    Description 「飞奔」快递公司成立之后,已经分别与市内许多中小企业公司签订邮件收送服务契约.由于有些公司是在同一栋大楼内,所以「飞奔」公司收件的地点(收件点)最多只有m点 (1, 2, …, ...

  9. Spark Streamming 基本输入流I(-) ：File/Hdfs

    Spark Streamming 基本输入流I(-):从文件中进行读取 文件读取1:本地文件读取 这里我只给出实现代码及操作步骤 1.在本地目录下创建目录,这里我们创建目录为~/log/ 2.然后手动 ...

  10. [SCOI2014]方伯伯运椰子

    嘟嘟嘟 01分数规划思维题. 题中要求交通总量不减少,那么如果总量增加的话,总费用就会增加,所以一定不是更优的解.那么总量守恒. 这是不是就想到了网络流?对于每一个节点流入量等于流出量.然后就是很有思 ...