Question

我有一个使用JavaScript动态更新的输入表单。使用d3，我想创建一个事件监听器，每次操作此输入时都将运行一个函数。

目前，如果我手动更改输入字段，它将运行，但如果使用JavaScript更新则不会运行。我尝试过使用.on("change",...和.on("input",...。

以下是我想要获得的功能的一个示例：

<!DOCTYPE html>
<meta charset="utf-8">

<input value="0" id="input1">
<button  onclick="clickFunc();">Click Me</button>


<script src="http://d3js.org/d3.v3.min.js"></script>
<script>

d3.select("#input1").on("input", function() {
// not printing when updated by javascript
  console.log('value changed');
});

function clickFunc() {
    document.getElementById('input1').value = document.getElementById('input1').value + 1;
}

</script>

Answer 1

您可以使用oninput=""元素中的input属性执行函数。

<input type="text" oninput="myFunction()">

在 JS 中，您还可以使用：

$("myobject").oninput = function(){myScript};

或者你对这个更好：

$("myobject").addEventListener("input", myScript);

Answer 2

您需要使用MutationObserver窗口类来观察JS触发的输入更改。

请记住，仅设置输入的节点value属性不会触发MutationObserver。您必须调用setAttribute(value, "value")才能获得MutationObserver选择的更改。

这是我做过的一个工作示例：https://codepen.io/Inlesco/pen/rmxdpz

当然，这是一个普通的JS解决方案。如果你不关心香草，并且使用jQuery是一种可取性，你可以尝试使用这个jQuery - 答案：Detect all changes to a <input type="text"> (immediately) using JQuery

虽然，我不能保证它会起作用。尚未测试过。

表单输入事件监听器

2 个答案: