JavaScript文本框焦点事件
效果图如下：
<!-- 当文本框获得焦点时候，如果文本框内容是 请输入搜索关键字 清空文本框，输入内容变黑色 -->
<!-- 当文本框失去焦点时候，如果文本框无内容，则添加灰色的 请输入搜索关键字 内容，否则，不改变 -->
注意事件：
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文本框焦点事件的更多相关文章
- javascript 文本框值变化触发事件
javascript 文本框值变化触发事件jo.find(".price").bind('input onpropertychange', function () { me.cal ...
- (三)在js(jquery)中获得文本框焦点和失去焦点的方法
在js(jquery)中获得文本框焦点和失去焦点的方法 文章介绍两个方法和种是利用javascript onFocus onBlur来判断焦点和失去焦点,加一种是利用jquery $(" ...
- jQuery登录界面的文本框焦点代码
<script type="text/javascript"> $(function(){ $("#address").focus(function ...
- 点击Enter键，文本框焦点改变 分类： WinForm 2014-04-15 10:30 223人阅读 评论(0) 收藏
一个例子: 一个简单的 登陆界面,有用户名.密码文本框.登陆按钮. 想要实现的效果是,用户输入用户名之后,点击Enter键进入到下一个文本框,同理,输入完密码之后,登陆按钮获得焦点,再次点击Ente ...
- jquery div 下拉框焦点事件
这章与上一张<jquery input 下拉框(模拟select控件)焦点事件>类似 这章讲述div的焦点事件如何使用 div的焦点事件与input的焦点事件区别在于 需要多添加一个属性: ...
- 文本框按键事件onkeydown、onkeypress、onkeyup区别
当我们在搜索时,会用到这几个事件 onkeydown 是指鼠标按下的那一刻,此时用户不知道按了什么,文本框也不会显示,首先触发的事件 onkeypress 是指鼠标按下然后松开的瞬间,此时仍然获取不到 ...
- JavaScript搜索框响应事件
HTML页面,注意:不要使用form标签 <input type = "text" name="keyword" id="keyword&quo ...
- javascript 文本框中,判断回车键触发事件 兼容IE&FireFox
1.onkeypress&onkeydown区别 onkeypress 事件在用户按下并放开任何字母数字键时发生.但是系统按钮(例如:箭头键.功能键)无法得到识别. onkeydown 事件在 ...
- jQuery中的bind绑定事件与文本框改变事件的临时解决方法
暂时没有想到什么好的解决办法,我现在加了个浏览器判断非ie的话就注册blur事件,这样有个问题就是blur实在别的控件活动焦点的时候,txtStation控件注册的方法是为了填充它紧挨着的一个下拉列表 ...
随机推荐
- C++基础--指针，&的用法
#include "stdafx.h" #include <stdio.h> #include <string.h> int main() { ] = {, ...
- ImageLoader简单使用
效果图就是一个从网络加载的图片:在加载的时候图片的中间显示一个进度条 数据是随便找的一个网络图片的地址 导入jar包universal-image-loader-1.9.5 用来展示商品使用 在 ...
- Oracle VM virtualBox -Centos6.4 安装后没有网解决方法
1.先修改Oracle VM virtualBox 的网络配置 2.然后启动centos输入: dhclient eth0 3.然后如果没报错的话 输入: ifconfig 就可以查看到ip地址 ...
- 数据库系统异常排查之DMV（转)
来源: http://www.cnblogs.com/fygh/archive/2012/03/12.html 数据库系统异常是DBA经常要面临的情景,一名有一定从业经验的DBA,都会有自己一套故障排 ...
- strtoul （将字符串转换成无符号长整型数）
strtoul strtoul (将字符串转换成无符号长整型数) 相关函数 atof,atoi,atol,strtod,strtol 表头文件 #include<stdlib.h> 定义函 ...
- python入门22 pymssql模块（python连接sql server查询）
安装 pip install pymssql 连接数据库 pymssql.connect() # coding:utf-8 import pymssql server = '192.168.8.1' ...
- IOS Core Motion、UIAccelerometer（加速计使用）
加速计 ● 加速计的作用 ● 用于检测设备的运动(比如摇晃) ● 加速计的经典应用场景 ● 摇一摇 ● 计步器 ● 加速计程序的开发 ● 在iOS4以前:使用UIAccelerometer,用法非常简 ...
- bzoj2003 [Hnoi2010]矩阵
Description Input 第一行包含三个正整数N M P表示矩阵的行数列数以及每个数的范围,接下来N行每行包含M个非负整数,其中第i行第j个数表示以格子(i,j)为右下角的2*2子矩阵中的数 ...
- 【洛谷5279】[ZJOI2019] 麻将（“胡牌自动机”上DP）
点此看题面 大致题意: 给你13张麻将牌,问你期望再摸多少张牌可以满足存在一个胡的子集. 似乎ZJOI2019Day1的最大收获是知道了什么是胡牌? 一个显然的性质 首先我们要知道一个显然的性质,即对 ...
- HDU 1575 Tr A 【矩阵经典2 矩阵快速幂入门】
任意门:http://acm.hdu.edu.cn/showproblem.php?pid=1575 Tr A Time Limit: 1000/1000 MS (Java/Others) Me ...