Question

只是一个简单的js片段：

HTML：

<input type="text" id="t1">
<input type="text" id="t2">

JAVASCRIPT：

var t1 = document.getElementById('t1');
var t2 = document.getElementById('t2');

t1.addEventListener('keyup', function () {
    t2.value = t1.value.toUpperCase();
});

t2.addEventListener('change propertychange input', function () {
    alert('dd');
});

正如您所看到的，t2的更改事件从未触发过！这很简单，不需要更多描述。在Chrome版本56.0.2924.87（64位）＆＃39;中测试和＃52; Firefox 52.0（32位）＆＃39;。有没有人有任何想法？

更新：

关于t2.addEventListener：

应该是这样的

t2.addEventListener('change', function () {
    alert('dd');
});

OR

$("#t2").on('change propertychange input',function(){
    // do something here......
});

再次更新：

实际上，没有t1输入或更改事件。我只是为了样本而使用它。我唯一想要的是我需要知道t2的值何时被另一个函数改变了。所以，我认为我们应该关注t2，而不是t1。

更新三：

我相信你们所有人之前都使用过Google自动填充功能。一些片段喜欢这个：

autocomplete = new google.maps.places.Autocomplete(
    // .......
);
autocomplete.addListener('place_changed', fillInAddress);

function fillInAddress(){
    t2.val(......);
}

但是，问题是，我不想把触发器放在“填充地址”中，相反，我想在addEventListener中捕获这个已更改的事件或者更改＆＃39;更改＆＃39 ;）在t2上，就像我之前写的那样......

最终更新：

仍然无法弄清楚为什么t2＆＃39;会改变＆＃39;事件无法触发。但是，我在t1中放了一些东西，就像@Kind用户那样，问题解决了。如果有人有任何想法，我非常感谢您与我分享！

Answer 1

在我的诚实意见中，我敢打赌，如果alert输入值更改是由t2输入的更改引起的，OP实际上希望t1触发。

注意：目前，这是一个jQuery解决方案。

$('#t1').on('keyup', function() {
  $('#t2').val($(this).val().toUpperCase()).change();
});

$('#t2').on('change', function() {
  alert('dd');
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" id="t1">
<input type="text" id="t2">

addEventListener似乎不适用于change事件

1 个答案: