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

jquery有input事件吗

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

北京

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

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

看不清楚,换张图片

免费获取短信验证码

jquery有input事件吗

jquery有input事件吗

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

jquery有input事件吗?

有。

jquery实现input输入框实时输入触发事件代码

代码如下:

<input id="productName" name="productName" class="wid10" type="text" value="" />

代码如下:

//绑定商品名称联想 
$('#productName').bind('input propertychange', function() {searchProductClassbyName();});

代码如下:

searchProductClassbyName 为触发后调用的方法;

dff5e9c443611dada4b338ce14824be.png

js/jquery 实时监听输入框值变化的完美方案:oninput & onpropertychange

(1)先说jquery, 使用 jQuery 库的话,只需要同时绑定 oninput 和 onpropertychange 两个事件就可以了,示例代码:

$('#username').bind('input propertychange', function() {
    $('#content').html($(this).val().length + ' characters');
});

(2)对于JS原生写法而言, oninput 是 HTML5 的标准事件,对于检测 textarea, input:text, input:password 和 input:search 这几个元素通过用户界面发生的内容变化非常有用,在内容修改后立即被触发,不像 onchange 事件需要失去焦点才触发。oninput 事件在主流浏览器的兼容情况如下:

5c326d4232d79f6b669cdb40bb492bb.png

从上面表格可以看出,oninput 事件在 IE9 以下版本不支持,需要使用 IE 特有的 onpropertychange 事件替代,这个事件在用户界面改变或者使用脚本直接修改内容两种情况下都会触发,有以下几种情况:

修改了 input:checkbox 或者 input:radio 元素的选择中状态, checked 属性发生变化。

修改了 input:text 或者 textarea 元素的值,value 属性发生变化。

修改了 select 元素的选中项,selectedIndex 属性发生变化。

  在监听到 onpropertychange 事件后,可以使用 event 的 propertyName 属性来获取发生变化的属性名称。

  集合 oninput & onpropertychange 监听输入框内容变化的示例代码如下:

 <head>
    <script type="text/javascript">
    // Firefox, Google Chrome, Opera, Safari, Internet Explorer from version 9
        function OnInput (event) {
            alert ("The new content: " + event.target.value);
        }
    // Internet Explorer
        function OnPropChanged (event) {
            if (event.propertyName.toLowerCase () == "value") {
                alert ("The new content: " + event.class="lazy" data-srcElement.value);
            }
        }
    </script>
</head>
<body>
    Please modify the contents of the text field.
    <input type="text" oninput="OnInput (event)" onpropertychange="OnPropChanged (event)"
     value="Text field" />
</body>

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

免责声明:

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

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

jquery有input事件吗

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

下载Word文档

猜你喜欢

jquery有input事件吗

jquery有input事件,jquery实现input输入框实时输入触发事件代码是“<input id="productName" name="productName" class="wid10" type="text" value="" />$('#productName').bind('input propertychange', function() {...}”。
2023-05-14

jquery有没有input事件

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

jquery点击input触发什么事件吗

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

jquery中有焦点事件吗

jquery有焦点事件。当元素获得焦点时,发生focus事件;jquery中可以使用focus()方法触发focus事件,或规定当发生focus事件时运行的事件处理函数,语法“$(selector).focus(function)”。当元素失去焦点时,发生blur事件;jquery中可以使用blur()方法触发blur事件,或规定当发生blur事件时运行的事件处理函数。
2023-05-14

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

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

jquery中有没有焦点事件

这篇文章主要介绍“jquery中有没有焦点事件”的相关知识,小编通过实际案例向大家展示操作过程,操作方法简单快捷,实用性强,希望这篇“jquery中有没有焦点事件”文章能帮助大家解决问题。jquery有焦点事件。当元素获得焦点时,发生foc
2023-07-04

jquery焦点事件有哪些

jquery焦点事件有两个:1、focus获取焦点事件,可以使用可以使用focus()方法来触发focus事件,或规定当发生focus事件时运行的事件处理函数,语法“$(选择器).focus(function)”。2、blur失去焦点事件,可以使用blur()方法触发blur事件,或规定当发生blur事件时运行的事件处理函数,语法“$(选择器).blur(function)”。
2023-05-14

常用的jQuery事件有哪些

常用的 jQuery 事件有:1. click - 鼠标单击事件2. dblclick - 鼠标双击事件3. mouseover - 鼠标移入事件4. mouseout - 鼠标移出事件5. mouseenter - 鼠标进入事件(在元素内
2023-10-11

jquery绑定事件有什么作用

jquery绑定事件的作用:将普通的事件event绑定在DOM节点上,当DOM节点被选中时,将事件与之绑定,方便用户提供相应的操作。jQuery中提供了四种事件绑定方式,分别是bind、live、delegate、on,对应的解除监听的函数分别是unbind、die、undelegate、off。
2023-05-14

jquery中常用的事件有哪些

jquery中常用的事件有:1、window事件;2、鼠标事件,是当用户在文档上面移动或单击鼠标时而产生的事件,包括鼠标单击、移入事件、移出事件等;3、键盘事件,是用户每次按下或者释放键盘上的按键时都会产生事件,包括按下按键事件、释放按键按键等;4、表单事件,例如当元素获得焦点时会触发focus()事件,失去焦点时会触发blur()事件,表单提交时会触发submit()事件。
2023-05-14

jQuery中的常用事件有哪些

小编给大家分享一下jQuery中的常用事件有哪些,希望大家阅读完这篇文章之后都有所收获,下面让我们一起去探讨吧!一、jQuery事件的分类jQuery事件是对JavaScript事件的封装,常用事件分类如下:1、基础事件window事件。鼠
2023-06-29

编程热搜

目录