jQuery 'input'事件

ktecyv1j 于 2023-10-17 发布在 jQuery

关注(0)|答案(9)|浏览(127)

我从来没有听说过jQuery中有一个叫做input的事件，直到我看到这个jsfiddle。
你知道它为什么会起作用吗？是keyup的别名吗？

$(document).on('input', 'input:text', function() {});

jquery

来源：https://stackoverflow.com/questions/17384218/jquery-input-event

9条答案

按热度按时间

fae0ux8s1#

当通过用户界面更改元素的文本内容时，
它不完全是keyup的别名，因为即使键什么也不做，keyup也会触发（例如：按下然后释放Control键将触发keyup事件）。
一个很好的思考方式是这样的：它是一个每当输入改变时就会触发的事件。这包括（但不限于）按下修改输入的键（例如，Ctrl本身不会触发事件，但Ctrl-V粘贴一些文本会触发事件），选择自动完成选项，Linux风格的中键粘贴，拖放和许多其他事情。
请参阅this页面和关于此答案的评论以了解更多详细信息。

赞(0）回复(0）举报 2023-10-17

2nc8po8w2#

oninput事件对于跟踪输入字段的更改非常有用。
但在IE版本< 9中不支持。但旧版本的IE有自己的专有事件onpropertychange，它的作用与oninput相同。
你可以这样使用它：

$(':input').on('input propertychange');

有一个完整的跨浏览器支持。
由于任何属性更改都可以触发propertychange，例如，disabled属性被更改，因此您希望包含以下内容：

$(':input').on('propertychange input', function (e) {
    var valueChanged = false;

    if (e.type=='propertychange') {
        valueChanged = e.originalEvent.propertyName=='value';
    } else {
        valueChanged = true;
    }
    if (valueChanged) {
        /* Code goes here */
    }
});

赞(0）回复(0）举报 2023-10-17

jaql4c8m3#

使用jQuery，以下内容在效果上是相同的：

$('a').click(function(){ doSomething(); });
$('a').on('click', function(){ doSomething(); });

然而，对于input事件，只有第二种模式在我测试过的浏览器中似乎可以工作。
因此，你希望这能起作用，但它不起作用（至少目前如此）：

$(':text').input(function(){ doSomething(); });

同样，如果你想利用事件委托（例如，要在input.text添加到DOM之前在#container上设置事件），应该记住：

$('#container').on('input', ':text', function(){ doSomething(); });

不幸的是，它现在不工作！
只有这种模式有效：

$(':text').on('input', function(){ doSomething(); });

根据更多最新信息编辑

我可以肯定地说，这种模式：

$('#container').on('input', ':text', function(){ doSomething(); });

现在也工作，在所有的“标准”浏览器.

赞(0）回复(0）举报 2023-10-17

roqulrg34#

使用INPUT时要小心。此事件在IE 11中的焦点和模糊上触发。但它是在其他浏览器发生变化时触发的。
https://connect.microsoft.com/IE/feedback/details/810538/ie-11-fires-input-event-on-focus

赞(0）回复(0）举报 2023-10-17

fykwrbwg5#

正如claustrofob所说，oninput支持IE9+。
However，“oninput事件在Internet Explorer 9中存在错误。仅当插入字符时，才通过用户界面从文本字段中删除字符时，不会激发此函数。虽然在Internet Explorer 9中支持onpropertychange事件，但与oninput事件类似，它也有缺陷，在删除时不会触发。
由于可以通过多种方式删除字符（Backspace和Delete键，CTRL + X，上下文菜单中的剪切和删除命令），因此没有很好的解决方案来检测所有更改。如果通过上下文菜单的删除命令删除字符，则无法在Internet Explorer 9的JavaScript中检测到修改。”
我有很好的结果绑定到输入和keyup（和keydown，如果你想它在IE中开火，同时按住Backspace键）。

赞(0）回复(0）举报 2023-10-17

tzdcorbm6#

我认为“input "在这里的工作方式与”oninput“在DOM O级事件模型中的工作方式相同。
顺便说一句：
正如silkfire评论的那样，我也在谷歌上搜索了'jQuery输入事件'。因此，我被带到这里，并惊讶地了解到'input'是jquery的**bind（）**命令的可接受参数。jQuery in Action（英语：jQuery in Action）102，2008 ed.）“输入”没有被提到作为一个可能的事件（对20个其他的，从“模糊”到“卸载”）。这是真的，在P。92，相反，可以推测从重读（即。从对级别0和级别2模型之间的不同字符串标识符的引用）。这是相当误导。

赞(0）回复(0）举报 2023-10-17

tvokkenx7#

jQuery的.on()方法有以下签名：.on( events [, selector ] [, data ], handler )
事件可以是此参考文件中列出的任何事件：
https://developer.mozilla.org/en-US/docs/Web/Events
但并非所有浏览器都支持它们。
Mozilla对输入事件有如下声明：
当一个或元素的值被改变时，DOM输入事件被同步触发。此外，当其内容被更改时，它会在contenteditable编辑器上触发。

赞(0）回复(0）举报 2023-10-17

uoifb46i8#

从文本输入中获取键入文本的最佳方式：

$(document).ready(function () {
  $('#divnode').text('Test...');
  $('input#search').on('input', (e) => {
    $('#divnode').text(e.target.value);
  });
});

.search{
    display: flex;
    background-color: rgba(184, 223, 255, 0.863);
    padding: 1vw;
    margin: 2vw;
    border: 1px solid gray;
    border-radius: 10px;
    
}
#search,#divnode{
    padding: 5px;
    margin: 5px;
    border: 1px dashed gray;
}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="shortcut icon" href="#" type="image/x-icon">
    <link rel="stylesheet" href="style.css">
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <script src="./script.js"></script>
    <title>Document</title>
</head>
<body>
    <div class="search">
        <input type="search" name="search" id="search">
        <div id="divnode"></div>
    </div>

</body>
</html>

赞(0）回复(0）举报 2023-10-17

daupos2t9#

$("input#myId").bind('keyup', function (e) {    
    // Do Stuff
});

在IE和Chrome中工作

赞(0）回复(0）举报 2023-10-17

我来回答

jQuery 'input'事件

9条答案

相关问题

热门标签

最新问答