Trung tâm cá nhân
sách gpt4 ăn đã đi

javascript - keydown 事件(TAB 键)修改元素值时未触发 Change 事件

In lại 作者：数据小太阳 更新时间：2023-10-29 05:08:02 29 4
mua khóa gpt4 giày nike

给定的 HTML:


和 JavaScript 的:

var $test = $('#test');

$test.on('keydown', function(event) {
    if (event.keyCode === 9) {
        $(event.target).val('change it!');
    }
});

$test.on('change', function(event) {
    alert('I am not called!');
});

如果我在输入中键入任何内容并点击 tab，为什么 change 事件没有触发？ keydown 事件触发，并更新输入的值。

如果我删除 .val() 调用，那么 change 会触发。

起初，我认为这是一个 jQuery 问题(运行 1.9.1)，但确认如果我使用纯 JavaScript 会发生相同的行为。

câu trả lời hay nhất

change仅针对用户提交的更改触发。换句话说，使用 JavaScript 在后台更改元素的值不会触发 change .

Tab 实际上并没有改变元素的内容；它只是切换焦点。在某些方面，您正在键入 tab 键来更改元素的内容是巧合的(您还不如按一个按钮来间接更新它，这也不会触发 change)。

The DOM spec解释了为什么在您的特定情况下，如果您键入并按 Tab 键，用户输入将被丢弃并且不会触发任何更改。

具体来说:

The keyboard events defined in this specification occur in a set order relative to one another, for any given key:

  • keydown
  • keypress (only for keys which produce a character value)
  • Any default actions related to this key
  • keyup

当您按下 Tab 键时，keydown被触发。繁荣，你的事件处理程序被调用了!元素内容由您的脚本更新——不会触发任何更改，因为它是脚本执行的。用户贡献的内容被清除。现在是浏览器执行与选项卡关联的默认操作的时候了:将焦点移开并查看元素是否被用户更改(触发 onchange)。不，是剧本改的!没有 change开火。

因此，如果您删除 val()行，您会注意到两件事。

  1. 如果您给元素焦点并关闭制表符，则不会 change被触发——没有发生任何变化，因为选项卡不改变字段内容。
  2. 如果您将焦点放在元素上并键入内容并关闭，change被解雇是因为在那个神奇的“与选项卡相关的默认操作”时刻，浏览器注意到用户做出了更改。

哇哦!

关于javascript - keydown 事件(TAB 键)修改元素值时未触发 Change 事件，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/18858692/

29 4 0
Đề xuất bài viết: javascript - Module.export-ing 一个新实例
Đề xuất bài viết: javascript - 在 ExtJS 中自动调整文本字段标签
Đề xuất bài viết: javascript - 使用 Jasmine 在 Karma 中进行 AngularJS 工厂测试
Đề xuất bài viết: javascript - AngularJS:绑定(bind)到所有对象属性？
数据小太阳
Hồ sơ

Tôi là một lập trình viên xuất sắc, rất giỏi!

Nhận phiếu giảm giá taxi Didi miễn phí
Phiếu giảm giá taxi Didi
Các bài viết phổ biến trên toàn bộ trang web
Chứng chỉ ICP Bắc Kinh số 000000
Hợp tác quảng cáo: 1813099741@qq.com 6ren.com
Xem sitemap của VNExpress