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


相关推荐

  • 禁用360浏览器6.2自带的Flash Player

    禁用360浏览器6.2自带的Flash Player360浏览器6.2自带了FlashPlayer,版本为11.6,而我需要使用最新版的FlashPlayer11.9,我安装了最新版的FlashPlayer11.9后,浏览网页时,360浏览器6.2默认使用的是自带的FlashPlayer11.6因此我们必须禁用掉360浏览器自带的FlashPlayer11.6——————————

    2022年6月11日
  • hybrid.js_js交互是什么意思

    hybrid.js_js交互是什么意思HybridApp(混合模式移动应用)是指介于web-app、native-app这两者之间的app,兼具“NativeApp良好交互体验的优势”和“WebApp跨平台开发的优势”。

    2022年9月22日
  • css绝对定位的参照物是什么_css 清除上定位

    css绝对定位的参照物是什么_css 清除上定位css绝对定位的重新认知所谓的css绝对定位,就是position:absolute;这里记录一个我的错误认知,就是绝对定位的参照物是内容,还是内容+内边距,我一直以为参照物就是内容,但是实际上参照物是内容+内边距看看下面的事例<!DOCTYPEhtml><html><head><metachars…

    2022年10月25日
  • 推荐使用C++ 11

    如果你的代码工作正常并且表现良好,你可能会想知道为什么还要使用C++11。当然了,使用用最新的技术感觉很好,但是事实上它是否值得呢? 在我看来,答案毫无疑问是肯定的。我在下面给出了9个理由

    2021年12月23日
  • C3P0jar包下载方法

    C3P0jar包下载方法百度C3P0下载官网进行下载或者进入下载链接:https://sourceforge.net/projects/c3p0/点击download下载即可进入官网:https://sourceforge.net/在右边搜索框搜索c3p0也能找到…

    2022年5月14日
  • 移动端开发规范

    移动端开发规范移动端开发规范引言:最近得空,整理一些平时工作中要求的开发规范,浅薄之处还请大家多指教。目录移动端开发规范代码规范基本原则代码清晰一致性通用规范类命名方法命名变量命名常量命名枚举类型命名图片命名通用规范通用设计规范开屏页版本号版本检查开屏页广告推送通用测试用例及处理规范规范用例数据埋点规范…

    2022年6月24日

发表回复

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

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