js中表单的聚焦失焦事件
焦点事件:
不是所有元素都有焦点事件,只有可交互性的元素才有,比如表单元素,a标签。页面中只能有一个元素有焦点,一个聚焦,另一个就失焦,默认在document。
例子结构如下:
<form>
<input type="text" name="txt1" id="txt" />
<input type="button" name="btn" value="点击" />
</form>
js操作如下:
1.form.txt1.focus(); // 让元素获得焦点,该方法不会触发onfocus()事件。
2.form.txt1.onfocus=function(){console.log(1);} // 元素获得焦点时会触发该事件
3.form.txt1.onblur=function(){console.log(2);} //元素失去焦点时触发该事件
4.form.btn.onclick=function(){ form.txt1.select(); } //选中输入框中的所有文字
5.form.btn.onclick=function(){ form.txt1.setSelectionRange(2,5) ; form.txt1.focus(); } / / setSelectionRange需要配合着focus()使用才看得到效果,其中setSelectionRange的结束位置不包含在内,setSelectionRange(start,end)包含两个参数,一个是start:起始位置;一个是end:结束位置。
默认情况下,输入框中的文字被选中的文字颜色是蓝色,如果想要改变背景颜色,可以使用 #txt::selection{ background: pink; }来改变
js中表单的聚焦失焦事件的更多相关文章
- 关于vue.js中表单控件绑定练习
html: <!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8 ...
- js中表单提交后按钮变灰色的功能
表单提交后按钮变成灰色 http://www.111cn.net/wy/js-ajax/45299.htm
- js进阶 12-5 jquery中表单事件如何使用
js进阶 12-5 jquery中表单事件如何使用 一.总结 一句话总结:表单事件如何使用:可元素添加事件监听,然后监听元素,和javase里面一样. 1.表单获取焦点和失去焦点事件有哪两组? 注意是 ...
- JS事件 失焦事件(onblur)onblur事件与onfocus是相对事件,当光标离开当前获得聚焦对象的时候,触发onblur事件,同时执行被调用的程序。
失焦事件(onblur) onblur事件与onfocus是相对事件,当光标离开当前获得聚焦对象的时候,触发onblur事件,同时执行被调用的程序. 如下代码, 网页中有用户和密码两个文本框.当前光标 ...
- js监听input等表单输入框的变化事件oninput
js监听input等表单输入框的变化事件oninput,手机页面开发中使用到文本框textarea输入字符监听文本框变化计算还可以输入多少字符,如果使用onkeyup的话是无法监听到输入法输入的文本变 ...
- js事件、Js中的for循环和事件的关系、this
一.js事件 1.事件 用户在网页中所触发的行为 鼠标滑动种类很多,键盘.表单特列: 点击:onclick 鼠标进入:onmouseenter 鼠标离开:onmouseleave 鼠标悬浮:onmo ...
- js表单提交,判断文本框,用户名密码是否为空,JS表单检测!
当表单提交时先触发验证的js代码,当验证表单的方法返回true时才会提交表单返回false则不提交数据<script type="text/javascript">fu ...
- 原生js表单序列化----- FormData
<style type="text/css"> .progress{ height: 10px; width: 600px; border: 1px solid red ...
- Js表单验证控件-02 Ajax验证
在<Js表单验证控件(使用方便,无需编码)-01使用说明>中,写了Verify.js验证控件的基本用法,基本可以满足大多数验证需求,如果涉及服务端的验证,则可以通过Ajax. Ajax验证 ...
随机推荐
- 使用sqlserver搭建高可用双机热备的Quartz集群部署【附源码】
一般拿Timer和Quartz相比较的,简直就是对Quartz的侮辱,两者的功能根本就不在一个层级上,如本篇介绍的Quartz强大的序列化机制,可以序列到 sqlserver,mysql,当然还可以在 ...
- setTimeout异步加载
两道经典的面试题,直接上代码 for(var i=0; i<3; i++){ setTimeout(function(){ i+=i; console.log(i); },1000) } var ...
- CSS小技巧-为内盒子添加margin-top时,会带着父盒子一起下来,如何解决?
1.为父盒子添加一个padding 2.为父盒子添加一个border 3.为父盒子添加一个overflow:hidden
- 各种语言一句话反弹shell
Bash [不通用,跟linux发行版本有关,在ubuntu上测试成功] bash -i >& /dev/tcp/ >& Perl perl -e 'use Socket; ...
- Spring学习(17)--- 三种装配Bean方式比较
基于XML配置 基于注解配置 基于Java类配置 Bean定义 <bean id="..." class="..." /> @Compone ...
- 水平方向的RecyclerView
最近做了一个项目需要实现一个卡片式的水平滑动,但是不能手势滑动,点击卡片上的按钮之后滑动到下一个卡片,所以想到用RecyclerView实现,去掉它的手势滑动,点击按钮之后再代码控制滑动到下一个卡片. ...
- C#的命名管道(named pipe)
命名管道是一种从一个进程到另一个进程用内核对象来进行信息传输.和一般的管道不同,命名管道可以被不同进程以不同的方式方法调用(可以跨权限.跨语言.跨平台).只要程序知道命名管道的名字,发送到命名管道里的 ...
- [POJ 2115} C Looooops 题解(扩展欧几里德)
题目描述 对于C的for(i=A ; i!=B ;i +=C)循环语句,给出A,B,C和k(k表示变量是在k进制下的无符号整数),判断循环次数,不能终止输出"FOREVER". 输 ...
- Thinkphp模板的使用
模板标签 内置标签:include,import,volist,foreach,for,switch,compare,present,empty,defined,if/else 输出php代码:PHP ...
- JavaWeb 环境搭建
环境搭建 JDK7 Java基本开发工具包 安装(目录[不要使用中文和空格].JDK+JRE) 配置环境变量[JAVA_HOME.path.classpath] 2. Tomcat7 提 ...