我的编程空间,编程开发者的网络收藏夹
学习永远不晚

jquery点击input触发什么事件吗

短信预约 -IT技能 免费直播动态提醒
省份

北京

  • 北京
  • 上海
  • 天津
  • 重庆
  • 河北
  • 山东
  • 辽宁
  • 黑龙江
  • 吉林
  • 甘肃
  • 青海
  • 河南
  • 江苏
  • 湖北
  • 湖南
  • 江西
  • 浙江
  • 广东
  • 云南
  • 福建
  • 海南
  • 山西
  • 四川
  • 陕西
  • 贵州
  • 安徽
  • 广西
  • 内蒙
  • 西藏
  • 新疆
  • 宁夏
  • 兵团
手机号立即预约

请填写图片验证码后获取短信验证码

看不清楚,换张图片

免费获取短信验证码

jquery点击input触发什么事件吗

本教程操作环境:windows7系统、jquery3.6.1版本、Dell G3电脑。

jquery点击input触发“焦点focus事件”。

焦点就是关注的区域,即当前光标被激活的位置,在页面屏幕中闪动的小竖线,表示网页某个控件被选中,可以被操作。鼠标点击可获得光标,Tab键可按照设置的Tabindex切换焦点。

比如一个input文本框获得焦点,你在点击input元素就直接进入了input文本框;还比如一个下拉式列表框获得焦点,你按下键盘上的向下箭头,它就会把列表列出来。程序中还有获得焦点发生的事件(gotfocus())和失去焦点发生的事件(lostfocus())以及为控件设置焦点方法(setfocus())。利用好焦点,能使你的程序显得非常人性化。

1.gif

当元素获得焦点时,发生 focus 事件。当通过鼠标点击选中元素或通过 tab 键定位到元素时,该元素就会获得焦点。

jquery focus()获得焦点事件

focus() 方法触发 focus 事件,或规定当发生 focus 事件时运行的函数。

语法:

//触发 focus 事件
$(selector).focus()

//将函数绑定到 focus 事件
$(selector).focus(function)

例:input 输入框获得焦点时改变其边框的颜色

示例代码:

<input type="text" name="" id="mochu">
<script>
    $('#mochu').focus(function(){
        $(this).css('border-color','red');
    });
</script>

当鼠标移入input中并点击时,input元素会变成如下的形式

2.gif

jq focus()事件,会为input加入一个CSS样式

<input type="text" name="" id="mochu" style="border-color: red;">

3.png

扩展知识:blur()方法设置失去焦点事件

blur()方法:当元素失去焦点时发生 blur 事件

语法:

//触发 blur 事件
$(selector).blur()

//将函数绑定到 blur 事件
$(selector).blur(function)

例:input失去焦点后,弹出输入框中的内容

示例代码:

<input type="text" name="" id="mochu">
<script>
    $('#mochu').blur(function(){ 
    alert($(this).val());    
    });
 </script>

运行结果如图:

4.png

利用jq blur()失去焦点事件来验证用户输入的内容

JQuery中的blur()失去焦点事件,我们可以用来检查用户在input输入框中输入的内容是否合法,比如以下代码,如果用户输入的内容少于五个字符就给出提示

示例代码:

<input type="text" name="" id="mochu">
<script>
    $('#mochu').blur(function(){
        if($(this).val().length < 5){
            alert('字数太少了,多输入几个吧');
        }
    });
</script>

5.png

【推荐学习:jQuery视频教程、web前端视频】

以上就是jquery点击input触发什么事件吗的详细内容,更多请关注编程网其它相关文章!

免责声明:

① 本站未注明“稿件来源”的信息均来自网络整理。其文字、图片和音视频稿件的所属权归原作者所有。本站收集整理出于非商业性的教育和科研之目的,并不意味着本站赞同其观点或证实其内容的真实性。仅作为临时的测试数据,供内部测试之用。本站并未授权任何人以任何方式主动获取本站任何信息。

② 本站未注明“稿件来源”的临时测试数据将在测试完成后最终做删除处理。有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341

jquery点击input触发什么事件吗

下载Word文档到电脑,方便收藏和打印~

下载Word文档

猜你喜欢

jquery点击input触发什么事件吗

点击input触发“焦点focus事件”,表示该input元素被选中,可以被操作,在页面屏幕中闪动的小竖线。在jquery中可以使用focus()方法触发或给元素绑定焦点事件,语法“$(selector).focus()”或“$(selector).focus(function)”。
2022-11-22

jquery点击input触发的事件是什么

这篇“jquery点击input触发的事件是什么”文章的知识点大部分人都不太理解,所以小编给大家总结了以下内容,内容详细,步骤清晰,具有一定的借鉴价值,希望大家阅读完这篇文章能有所收获,下面我们一起来看看这篇“jquery点击input触发
2023-07-04

jquery如何触发点击事件

使用`.click()`方法来触发点击事件。例如:```javascript// 通过 ID 选择器选中需要触发点击事件的元素$("#myButton").click();// 通过类选择器选中需要触发点击事件的元素$(".myButton
2023-08-15

Android怎么开发Input系统触摸事件分发

本篇内容介绍了“Android怎么开发Input系统触摸事件分发”的有关知识,在实际案例的操作过程中,不少人都会遇到这样的困境,接下来就让小编带领大家学习一下如何处理这些情况吧!希望大家仔细阅读,能够学有所成!引言Input系统: Inpu
2023-07-05

怎么解决vue点击弹窗自动触发点击事件的问题

这篇文章给大家分享的是有关怎么解决vue点击弹窗自动触发点击事件的问题的内容。小编觉得挺实用的,因此分享给大家做个参考,一起跟随小编过来看看吧。业务场景:使用vue +element ui 的el-dialog,点击弹窗之后,默认加载第一个
2023-06-15

jquery可以为按钮绑定点击事件吗

jquery可以为按钮绑定点击事件。绑定方法:1、利用选择器选取按钮元素对象,语法“$("选择器")”,会返回包含指定按钮元素的jquery对象;2、使用click()或dblclick()函数为按钮绑定点击事件,语法“按钮元素对象.click(function(){//运行代码});”或“按钮元素对象.dblclick(function(){//运行代码});”。
2023-05-14

jQuery鼠标点击事件怎么实现

可以使用 jQuery 的 click() 方法来实现鼠标点击事件。例如,假设有一个按钮的 HTML 代码如下:``````那么可以使用以下 jQuery 代码来实现鼠标点击事件:```$("#myButton").click(functi
2023-05-29

编程热搜

目录