Question

在下面的代码中，我有＆＃34;输入＆＃34;事件处理程序，在用户键入时更改输入的值。我也有＆＃34;改变＆＃34;事件处理程序，用于跟踪对此字段所做的任何更改。出于某种原因＆＃34;改变＆＃34;当用户离开现场时，事件不会在Chrome和IE中触发。为什么这样以及如何使其在所有主流浏览器中都有效？

另请注意，触发＆＃34;更改＆＃34;是不可接受的。每次手动事件＆＃34;输入＆＃34;事件火灾。

编辑：＆＃34;更改＆＃34;只有在transform函数不以任何方式更改结果字符串时，才会在Chrome中触发事件。因此，如果我输入小写字母并在每个字符后聚焦，＆＃34;更改＆＃34;仅针对索引0,2,4 ...

触发

链接到小提琴：http://jsfiddle.net/3hqxx2pr/

＆＃13;

function transform(s) {
    var r = "";
    for (var i = 0; i < s.length; i++) {
        r += i & 1 ? s[i].toUpperCase() : s[i];
    }
    return r;
}

$(document).ready(function(){
  
    $("#in").on("change", function() {
        console.log("changed"); // works only in ff
    });

    $("#in").on("input propertychange", function() {
        $("#in").val(transform($("#in").val()));
    });
  
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<input id="in"/>

＆＃13;

Answer 1

触发更改

$("#in").val(transform($("#in").val())).change();

或

$("#in").val(transform($("#in").val())).trigger("change");

根据您所做的编辑和限制：

$("#in").on("input propertychange", function() {
    var inp = $(this);
    var orgVal = inp.val();
    var transVal = transform(orgVal);
    if (orgVal !== transVal) {
        inp.val(transVal).trigger("change");
    }
});

更改“输入”事件处理程序中的输入值可防止Chrome和IE中的“更改”事件触发（但不会在Firefox中）

1 个答案: