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)
全栈程序员-站长的头像全栈程序员-站长


相关推荐

  • 英文论文引用文献_外国绘本论文参考文献

    英文论文引用文献_外国绘本论文参考文献php论文英文参考文献一:[1]PedroB.ImprovingthespeedofPHPWebscripts.LinuxJournal.2002[2]ErichGamma,RichardHelm,RalphJohns.DesignPatterns:ElementsofReusableObjectOrientedSoftware..1995[3]H…

    2022年9月1日
    1
  • SQL中declare_hive变量赋值

    SQL中declare_hive变量赋值平时写SQL查询、存储过程都是凭着感觉来,没有探究过SQL的具体语法,一直都是按c#那一套往SQL上模仿,前几天项目中碰到一个问题引起了我对declare定义变量的作用域的兴趣。大家都知道c#中的局部变量,在if中如果我们定义一个变量的话他的作用到if结束为止,if外是不识别这个变量的,else里都不能使用,简单的写一下。

    2022年8月20日
    6
  • jstat使用_jvm常用命令

    jstat使用_jvm常用命令如何判断JVM是否存在内存问题呢?判断JVM垃圾回收是否正常?一般的top指令基本上满足不了这样的需求,因为它主要监控的是总体的系统资源,很难定位到java应用程序。Jstat是JDK自带的一个轻量级小工具。全称“JavaVirtualMachinestatisticsmonitoringtool”,它位于java的bin目录下,主要利用JVM内建的指令对Java应用程序的资源和性能…

    2022年9月12日
    0
  • Java学习路线图(完整详细2021版)

    Java学习路线图(完整详细2021版)作为一个男人我感觉必须得做点什么来证明一下自己,现在我又回来了,准备把自己的节操准备补一下 另外给各位未来的Java程序员说一句,别的我不清楚,学习编程请从一而终 咱们学习编程就挺难的,有这些先驱者来带领咱们学习,咱们应该感激,而且最重要的事跟着你选定的一家一直学下去 因为每家学校的学习大纲都是不一样的,但是程序员其实都是一样的,这句话你细品!仔细的品! 我不希望你忙忙碌碌的整理那么多东西,挑肥拣瘦的,最后自己学的东西还是缺失的,要不就…

    2022年5月17日
    85
  • 网口调试步骤_万兆光口和千兆光口对接

    网口调试步骤_万兆光口和千兆光口对接千兆网口、光口调试总结配置6096端:工作模式的配置方式:1、 硬件配置,通过电阻上下拉确定;6096的硬件配置不可以错,其在portstatus寄存器状态中有相应的寄存器位体现硬件配置的工作模式。2、 软件配置,主要是配置链路层的工作模式。主要是设置PCS(Physicalcodingsublayer)寄存器。3、 Marvell的PHY芯片有个特性,叫P

    2022年9月13日
    0
  • CentOS下netstat命令详解

    CentOS下netstat命令详解为什么80%的码农都做不了架构师?>>>…

    2022年5月30日
    55

发表回复

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

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