效果图如下：

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

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

注意事件：

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. PHP正则表达式实例汇总

    $str = preg_replace("/(<a.*?>)(.*?)(<\/a>)/", '\1<span class="link&quo ...

  2. css3总结之居中

    居中在前端布局上很常见,也很常用,也是最基本的技巧.居中效果在方向控制上基本可以分解成水平居中,垂直居中和水平垂直居中. 针对调整的元素不同,具体的处理方式上有些差异.这里我们先不讲绝对定位下的居中, ...

  3. MongoDB学习之mongoose

    MongoDB介绍: MongoDB是基于Javascript语言的数据库,存储格式是JSON,而Node也是基于JavaScript的环境(库),所以node和mongoDB的搭配能减少因为数据转换 ...

  4. Thread类的sleep()方法和对象的wait()方法都可以让线程暂停执行，它们有什么区别? 线程的sleep()方法和yield()方法有什么区别？

    Thread类的sleep()方法和对象的wait()方法都可以让线程暂停执行,它们有什么区别? sleep()方法(休眠)是线程类(Thread)的静态方法,调用此方法会让当前线程暂停执行指定的时间 ...

  5. ORACLE_DELETE

    SQL DELETE Statement The SQL DELETE Statement The DELETE statement is used to delete existing record ...

  6. 【java开发系列】—— 嵌套类与内部类

    嵌套类与内部类在java中使用的很广泛,为了避免难以理解,这里用了几个小例子,说明它的用法. 嵌套类与内部类的结构如下图 静态嵌套类 静态嵌套类,是一种在类之外声明的嵌套类,由于是静态的,所以不经过初 ...

  7. python入门9 条件语句

    条件语句: if 条件为真: 执行语句块 (执行完结束不执行elif,else) elif 条件为真: 执行语句块 (执行完结束不执行else) else: 执行语句块 #coding:utf-8 # ...

  8. 西汉姆VS利物浦，铁锤『拳』出击，打回原『菱』形

    一.铁锤,还是铁桶?   铁锤帮西汉姆今晚摆出4-2-3-1对阵红军利物浦的4-3-3 ,阿勒戴斯曾在主场2-1战胜赫尔城时被球迷嘘,嫌他的足球太过丑陋『2010年的时候贝尼特斯也曾经诟病阿勒戴斯带队 ...

  9. ORACLE常用函数汇总（持续更新中....）

    在使用ORACLE过程中,把一些常用的函数的相关用法,注意事项进行简单的汇总,便于自己查询参考. DBMS_RANDOM包 dbms_random是一个可以生成随机数值或者字符串的程序包.这个包有in ...

  10. OC static 和变量

    #include <stdio.h> // 如果在不同源文件出现了同名的内部变量,那么这些变量将互不干扰 static int b; // 用static修饰的全部变量,可以称为内部变量 ...