首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

input获取焦点 原生js_原生js的input事件

1.onfocus 当input 获取焦点时触发 2.onblur 当input失去焦点时触发,注意:这个事件触发的前提是已经获取焦点再失去焦点的时候才会触发该事件,用于判断标签为空。...3.onchange 当input失去焦点并且它的value值发生变化时触发,个人感觉可以用于注册时的确认密码。...4.onkeydown 按下按键时的事件触发, 5.onkeyup 当按键抬起的时候触发的事件,在该事件触发之前一定触发了onkeydown事件–相当于一个按键,两个事件,没怎么用过 6.onclick...当input的value值发生变化时就会触发,(与onchange的区别是不用等到失去焦点就可以触发了) 使用方法: 以上事件可以直接放到input的属性里,例如: 1 , 可以通过js给input...dom元素添加相应的事件, 2 document.getElementByTagName(‘input’).onfocus = function(); 3 事件监听。

25.7K60

jquery 绑定事件 - blur() 失去焦点 - focus() 获取焦点

事件函数列表 blur() 元素失去焦点 focus() 元素获得焦点 click() 鼠标单击 mouseover() 鼠标进入(进入子元素也触发) mouseout() 鼠标离开(离开子元素也触发)...() DOM加载完成 resize() 浏览器窗口的大小发生改变 scroll() 滚动条的位置发生变化 submit() 用户递交表单 编写一个form表单,用来演示输入框获取焦点和失去焦点的示例 ?...focus() 元素获得焦点 首先先来这个focus()函数。 ? 可以看到当获取焦点的时候,就立即弹出alert()。...其实通过focus()函数只是简单用来初始化文本框的焦点输入的而已,如下: ? 当刚进入页面,文本框就自动获取焦点,这基本上就是这个方法的大部分用法了。...blur() 元素失去焦点 使用blur()失去焦点这个方法一般会结合获取文本框内容的函数一起使用,如下: ? 当获取到文本框内的值之后,就可以对其进行正则验证或者其他方式的校验。

12.3K30
  • 您找到你想要的搜索结果了吗?
    是的
    没有找到

    获得焦点与失去焦点事件

    一 介绍 获得焦点事件(onfocus)是当某个元素获得焦点时触发事件处理程序。 失去焦点事件(onblur)是当前元素失去焦点时触发事件处理程序。...一般情况下,这两个事件是同时使用的。...二 应用 文本框获得焦点时改变背景颜色 本示例是在用户选择页面中的文本框时,改变文本框的背景颜色,当选择其他文本框时,将失去焦点的文本框背景颜色恢复原始状态。...-- function txtfocus(event){ //当前元素获得焦点 var e=window.event; var obj=e.srcElement; //用于获取当前对象的名称 obj.style.background...="#FFFF66"; } function txtblur(event){ //当前元素失去焦点 var e=window.event; var obj=e.srcElement; obj.style.background

    6K30

    【Web APIs】JavaScript 操作元素 ⑧ ( DOM 操作元素 案例 | 获取焦点 onfocus 事件 | 失去焦点 onblur 事件 | 获取设置 HTML 页面背景颜色 )

    一、案例需求 实现如下效果 , 默认状态下 , 表单显示灰色提示字体 , 点击表单输入内容是黑色字体的 ; 二、案例核心要点 1、获取焦点事件 - onfocus 事件 在 JavaScript 中 ,...当 DOM 元素 获得焦点时 , 该 DOM 元素上绑定的 onfocus 事件被触发 ; 绑定该 onfocus 事件的元素 一般都是 input 表单元素 ; 如 : 当 用户 点击输入框 或 通过键盘切换到输入框时...- onblur 事件 在 JavaScript 中 , 当 DOM 元素 失去焦点时 , 该 DOM 元素上绑定的 onblur 事件被触发 ; 如 : 用户从 输入框 移动到 页面的其他部分 或...按下 Tab 键 移动 焦点时 , 该事件会被触发 ; 绑定 onblur 事件的方法 : 设置 onblur 属性 : 可以通过 DOM 操作 , 给元素添加 onblur 属性 , 来指定当焦点集中在元素上时要执行的...注册 获得焦点 事件 onfocus text.onfocus = function() { // 如果 input 表单获取焦点 , 则显示 " 请输入搜索内容

    10410

    JS获取事件对象,获取事件的源对象(Firefox,IE)

    做笔记,以防自己忘记~~ JS获取事件event,不同浏览器有不同的做法。 例如IE下,在js函数中,通过window.event就可以获取,不必在函数中添加什么参数。...也可以用Prototype或者JQuery等,它们有他们对事件的包装。还是使用JS库比较好,不然就有下边的麻烦。...感觉这个挺好,可以捕获当前事件作用的对象,如event.srcElement.tagName可以捕获活动标记名称。注意获取的标记都以大写表示,如"TD","TR","A"等。...在 ie中处理事件直接使用window.event对象即可,但在firefox中,是没有 window.event对象的,函数需要使用事件的时候,需要在事件发生时把事件作为参数传递给函数,不象在ie...中,事件对象是全局的,随处都可以访 问.下面这个getEvent()函数可以兼容firefox和ie,只需要在访问事件对象的函数的开始调用getEvent()即可,不用再把事件作为 参数传递.以下代码已经实验通过

    10.1K50

    【Android TV 开发】焦点处理 ( 父容器与子组件焦点获取关系处理 | 不同电视设备上的兼容问题 | 触摸获取焦点 | 按键获取焦点 )

    | 触摸获取焦点 | 按键获取焦点 ) 文章目录 Android TV 开发系列文章目录 一、父容器与子组件焦点获取关系处理 二、不同电视设备上的兼容问题 三、按键获取焦点 四、触摸获取焦点 一、父容器与子组件焦点获取关系处理..., 如果父容器不需要焦点 , 子组件才能获取焦点 ; ② afterDescendants : 子组件 优先获取焦点 , 如果子组件不需要获取焦点 , 则父容器获取焦点 ; ③ blocksDescendants...: ① 设置可获取焦点 : 给 需要获取焦点的组件 , 统一添加 android:focusable="true" 属性 ; ② 设置不可获取焦点 : 凡是 不需要获取焦点的组件 , 统一添加 android...="true" Button , TextView , 布局组件 , 等默认没有触摸焦点 , 因为这些组件可能用于点击事件 , 如果这些组件可获取焦点 , 用户点击这些组件后 , 要先获取焦点 , 触发...OnFocusChangeListener 回调 , 获取焦点后才能进行点击 ; EditText 默认自动获取焦点 , 并且进入界面抢先获取焦点 , 该组件需要有光标 , 并且弹出软键盘 ;

    3.2K40

    Java事件处理,低级事件类型:键盘事件+焦点事件,你真的懂吗?

    也可以改变焦点遍历的顺序,有关这个主题更加详细的内容请参阅下一章。 幸运的是,大多数应用程序程序员不必过分地为焦点处理而担忧。在JDK 1.4之前,对组件焦点事件的捕获主要用于核查错误与校验数据。...当用户编辑完毕这个域,并将焦点移至另外一个域上时,就应该捕获失去焦点事件。如果信用卡号的格式不正确,就立即显示一个错误消息,并将焦点返回到信用卡域上。...在本节的剩余部分,将讨论焦点事件的详细内容,这些内容完全可以等到需要精心设计焦点控制时再阅读。 在JDK 1.4中,可以很容易地发现: • 焦点拥有者,也就是拥有焦点的那个组件。...注意:有些程序员觉得FOCUS_LOST事件有些混乱,并试图在focusLost处理器中通过请求获得焦点来阻止其他组件。然而,在这个时候,焦点已经失去了。...• void setFocusable(boolean b) 1.4 • boolean isFocusable( ) 1.4 设置或获取该组件的“focusable”状态。

    4K30
    领券