jq 获取有焦点的input_jquery获得焦点和失去焦点

jq 获取有焦点的input_jquery获得焦点和失去焦点前端网站中如果存在一些让用户填写内容的表单元素的话,我们可以使用JQ中获得焦点事件和失去焦点事件,来给用户作出一些提示的内容。今天我们就说一说JQuery下获得焦点和失去焦点的事件的使用方法。jqueryfocus()获得焦点事件focus()方法:当通过鼠标点击选中元素或通过tab键定位到元素时,该元素就会获得焦点。语法:例:input输入框获得焦点时改变其边框的颜色示例代码:当鼠标移入…

大家好,又见面了,我是你们的朋友全栈君。

前端网站中如果存在一些让用户填写内容的表单元素的话,我们可以使用JQ中获得焦点事件和失去焦点事件,来给用户作出一些提示的内容。今天我们就说一说JQuery下获得焦点和失去焦点的事件的使用方法。

jquery focus()获得焦点事件

focus()方法:当通过鼠标点击选中元素或通过 tab 键定位到元素时,该元素就会获得焦点。

语法:

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

示例代码:

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

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

jquery blur()失去焦点事件

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

语法:

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

示例代码:

运行结果如图:

jq 获取有焦点的input_jquery获得焦点和失去焦点

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

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

示例代码:

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请联系我们举报,一经查实,本站将立刻删除。

发布者:全栈程序员-站长,转载请注明出处:https://javaforall.net/149163.html原文链接:https://javaforall.net

(0)
全栈程序员-站长的头像全栈程序员-站长


相关推荐

  • 二进制减法计算,负数原码、反码和补码之间的关系

    二进制减法计算,负数原码、反码和补码之间的关系二进制减法类似于十进制的减法,我们从十进制的减法来推出二进制减法如何进行运算。二进制计算例如101001-011010=001111(41-26=15)的运算。灰色部分为计算过程,绿色字为被减一得到的数,红色字为借一后得到的数。在运算过程中,从右往左逐位进行计算。1-0=1; 0不够减1,向前借一后加2变成2;2-1=1; 0在上一步被借一所以减为-1,-1不够减…

    2022年9月24日
    0
  • painless数字类型转换_笔记四十五: Ingest Pipeline 与 Painless Script

    需求:修复与增强写入的数据Tags字段中,逗号分割的文本应该是数组,而不是一个字符串需求:后期需要对Tags进行Aggregation统计IngestNodeElasticsearch5.0后,引入的一种新的节点类型。默认配置下,每个节点都是IngestNode具有预处理数据的能力,可拦截Index或者BulckAPI的请求对数据进行转换,并重新返回给Index和…

    2022年4月8日
    57
  • elf格式分析

    elf格式分析

    2021年12月10日
    40
  • redis端口号为什么是6379「建议收藏」

    redis端口号为什么是6379「建议收藏」6379在是手机按键上MERZ对应的号码,而MERZ取自意大利歌女AlessiaMerz的名字。MERZ长期以来被Redis作者antirez及其朋友当作愚蠢的代名词。后来Redis作者在开发Redis时就选用了这个端口。——AlessiaMerz是一位意大利舞女、女演员。Redis作者Antirez早年看电视节目,觉得Merz在节目中的一些话愚蠢可笑,Antirez喜欢造…

    2022年5月30日
    228
  • nginx一个端口配置多个项目_映射地址怎么设置

    nginx一个端口配置多个项目_映射地址怎么设置Nginx默认的80端口如果想要同时配置多个项目,让项目实现不需要指定端口号即可访问,按照如下配置即可更多精彩更多技术博客,请移步IT人才终生实训与职业进阶平台-实训在线前置内容使用Nginx部署Vue项目这片笔记里面介绍了如何使用Nginx部署项目找到对应项目的Nginx配置一般比较规范的配置方式是为每个单独的项目创建.conf文件,如…

    2022年9月4日
    14
  • PowerBI通过gateway连接多维数据库

    PowerBI通过gateway连接多维数据库

    2021年11月26日
    43

发表回复

您的邮箱地址不会被公开。 必填项已用 * 标注

关注全栈程序员社区公众号