首页
学习
活动
专区
圈层
工具
发布

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

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

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

    【HarmonyOS】输入框焦点控制实现键盘显隐和进入页面默认弹出键盘获取a焦点设置

    ##鸿蒙开发能力 ##HarmonyOS SDK应用服务##鸿蒙金融类应用 (金融理财#问题背景:鸿蒙中输入框控件,TextInput最常见的控制,即:针对输入框焦点控制,获取焦点,失去焦点。...解决方案:问题一:1.首先调用此接口可以主动让焦点转移至参数指定的组件上:focusControl.requestFocus("id");***注意:1.支持焦点控制的组件:TextInput、TextArea...***2.监听监控自身的获取焦点回调和失去焦点回调:onFocusonBlur3.点击控件时需要设置控件获取焦点问题二:1.进入页面,键盘就自动弹出,需要在输入框控件上设置 defaultFocu(true...this.showToast("onFocus 获得焦点回调"); }) // 失去焦点回调 .onBlur(()=>{ // do sth...this.showToast("onBlur 失去焦点回调"); }) .onClick(()=>{ this.setFocus(); })

    72110

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

    addEventListener document.getElementById("myInput").addEventListener("focus", function() { // 执行相关操作 }); 2、失去焦点事件...- onblur 事件 在 JavaScript 中 , 当 DOM 元素 失去焦点时 , 该 DOM 元素上绑定的 onblur 事件被触发 ; 如 : 用户从 输入框 移动到 页面的其他部分 或...注册 获得焦点 事件 onfocus text.onfocus = function() { // 如果 input 表单获取焦点 , 则显示 " 请输入搜索内容...注册 失去焦点事件 onblur text.onblur = function() { if (this.value === '') {...this.value = '请输入搜索内容'; } // 失去焦点后 , 颜色变为灰色 this.style.color = 'gray

    2.3K10

    HarmonyOS 开发实践 —— 如何定位解决焦点问题

    是获焦的能力,不一定当前焦点就在设置的组件上。 存在默认交互逻辑的组件例如button、TextInput等,默认即为可获焦。Text、Image等组件默认状态为不可获焦。...比如:页面初次构建完成时,使TextInput默认获取焦点,但不希望弹出键盘,则可以设置enableKeyboardOnfocus为false。2、主动获取焦点若组件本身有获焦能力,默认可获焦。...onBlur:组件失去焦点时触发的回调一个节点获焦了,说的是它所在的焦点链获焦,也就是它和它的祖先节点都会触发onFocus。...定位 FAQ1、显隐切换时焦点控制TextInput控件的defaultFocus为true时,进入包含该控件的界面就会自动获得焦点。...:查看二级页面的焦点树,确定跳转到二级页面TextInput没有获焦。

    2.1K21

    HarmonyOS 开发实践 —— 基于TextInput的常见自定义效果解决方案

    方案1、用Stack组件堆叠Swiper和TextInput,让Swiper在TextInput中间显示核心代码。...Row() {  Stack() {    // 使用Stack堆叠Swiper和TextInput组件。   ...(Color.Pink)  .placeholderFont({ size: 18, weight: 400 })场景三:**TextInput**输入的时候,当文字达到一定数量的时候,自动失去焦点,收起键盘当输入框内容字符达到一定数量时...,自动失去焦点,收起键盘效果图方案主要是在onChange中通过判断输入的字符长度大于某个数量时,利用TextInputController.stopEditing方法控制键盘关闭。...Text('场景3:当输入框字符超过20个自动失去焦点,收起键盘').fontSize(9).fontColor('#ff5d5252')TextInput({ text: this.textThree

    1.3K20

    React Native组件(四)TextInput组件解析

    1 概述 TextInput组件和Text组件类似,内部都没有使用FlexBox布局,不同的是TextInput组件支持文字的输入,因为支持文字输入, TextInput组件要比Text组件多了一些属性和方法...TextInput组件支持Text组件所有的Style属性,而TextInput组件本身是没有特有的Style属性的。...上面的例子我们用到了TextInput组件的onChangeText属性,当我们在TextInput中输入内容时,这个内容就会通过onChangeText的参数text传递回来,在onChangeText...2.4 blurOnSubmit 如果blurOnSubmit值为true,文本框会在按下提交键时失去焦点。对于单行输入框,blurOnSubmit默认值为true,多行则为false。...isFocused(): boolean 返回值表明当前输入框是否获得了焦点。 好了,到这里TextInput组件就介绍到这里,还有一些没有列出的属性请查看官方文档。

    2.8K80
    领券