【问题标题】：Add an onchange event listener to an html input field将 onchange 事件侦听器添加到 html 输入字段
【发布时间】：2014-07-21 12:31:27
【问题描述】：

我想在那些没有 jquery 的输入字段中添加一个onchange 事件：

<input type="text" id="cbid.wizard.1._latitude">
<input type="text" id="cbid.wizard.1._longitude">

我已经可以调用对象了

<script type="text/javascript">
    alert(document.getElementById('cbid.wizard.1._latitude').id);
</script>

最后，我想添加这种行为，如果您在第一个输入中输入一对坐标，我会将这对坐标分布在两个输入字段中？

如何使用 javascript 添加onchange 事件？

【问题讨论】：

document.getElementById('cbid.wizard.1._latitude').addEventListener('change',function() { <stuff here> },false); 应该可以工作。

标签： javascript

【解决方案1】：

嗯，为“更改”事件附加一个事件处理程序？

纯 JS

document.getElementById('element_id').onchange = function() {
  // your logic
};

// or

document.getElementById('element_id').addEventListener(
  'change',
  callbackFunction,
  false
);

jQuery

$('#element_id').change(function() {
  // your logic
});

注意

请注意，文本字段上的change 事件将在blur 事件之后触发。您可能正在寻找keypress 事件或类似的东西。

【讨论】：

基本上他在寻求解决方案without jquery
但是拥有 jQuery 等价物也很方便

【解决方案2】：

document.getElementById('cbid.wizard.1._latitude').onchange = function(){
   //do something
}

GlobalEventHandlers.onchange docs

或

document.getElementById('cbid.wizard.1._latitude').addEventListener("change", function(){
    //do something
});

EventTarget.addEventListener docs

【讨论】：

我不需要window.onload吗？
你应该使用window.onload。
addEventListener("change", function(){...});如果在同一页面中使用，似乎适用于文档中的最后一个元素我该如何解决这个问题。我在同一页面上有三组表单，但更改事件只影响我最后放置的那一个。

【解决方案3】：

在您的window.onload 中使用addEventListener

    window.onload=function(){    
document.getElementById('cbid.wizard.1._latitude').addEventListener("change", function(){
            //do something
        });
    };

addEventListener

【讨论】：

【解决方案4】：

请尝试以下代码 sn-p。

<body>
    <input type="text" id="cbid.wizard.1._latitude">
    <input type="text" id="cbid.wizard.1._longitude">
    <script type="text/javascript">
        var txt1 = document.getElementById('cbid.wizard.1._latitude');
        txt1.addEventListener('change', function () { alert('a'); }, false);
    </script>
</body>

【讨论】：