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控件注册的方法是为了填充它紧挨着的一个下拉列表 ...
随机推荐
- win7上装红米4手机驱动提示空间不足
首先说:小米的垃圾支持.我在支持页面上看着 miuiV4或V5版本,再看我手机上9.5的版本.就感觉有些不妙. 下载下来后,点击安装程序,提示我安装空间不足......我F盘可用空间140G,不够你造 ...
- QBC(Query By Criteria) QBE (Query By Example)
QBC 参考:(Hibernate的QBC查询) //is empty and is not empty @Test public void testQBC(){ Session session = ...
- SVNKit学习——svn二次开发背景和闲谈(一)
开发背景: 简述现有流程:代码的合并.提交是以任务为最小单元的.例如A和B两个同学开发不同的任务,那就是两个任务号.合并的时候可能会先合并A的代码,在合并B的代码. 需求:SVN合并程序开发——一款能 ...
- 爬虫入门之爬取策略 XPath与bs4实现(五)
爬虫入门之爬取策略 XPath与bs4实现(五) 在爬虫系统中,待抓取URL队列是很重要的一部分.待抓取URL队列中的URL以什么样的顺序排列也是一个很重要的问题,因为这涉及到先抓取那个页面,后抓取哪 ...
- JSP中include动作与指令
include指令 JSP中有三大指令:page,include,taglib,之前已经说过了page的用法.这里介绍下include. 使用语法如下: <%@ include file=&qu ...
- 解决SQLite打开已有路径下的db问题
最近遇到的需要加载已有路径下(sd card下)db的问题,找了一下资料,以下是解决的方法,仅供参考(转载自eoe): SQLiteOpenHelper 是Android框架为我们提供的一个非常好的数 ...
- 一种不通过UI给C4C自定义BO创建测试数据的方式
假设我在Cloud Studio里创建了如下一个非常简单的自定义BO: 我想生成一些该BO的实例.以前我采用的做法是给这个自定义BO创建编辑用的UI.然后使用这些UI创建BO实例.这种方式很花费时间. ...
- 用js写三级联动
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- js CheckBox只读
checkbox没有readOnly属性 所以我们要设置CHeckbox是只读的话就要设置其onclick方法并返回false checkbox.onclick=function(){return f ...
- 【luogu P1040 加分二叉树】 题解
题目链接:https://www.luogu.org/problemnew/show/P1040 今天考试考了一个区间DP...没错就是这个... 太蒟了真是连区间DP都不会...看了看题解也看不懂, ...