文本框中的文本更改时的运行事件

Question

我有一个从数据库填充的文本框。 当文本框中的文本更改时，我想运行JavaScript。 我正在使用事件onChange但这无法正常工作。 仅当我手动更改文本框中的文本时，它才会运行脚本。 从数据库填充时（没有按键或选择）则不是。

这是我的文本框：

<input type="hidden" class="form-control" id="name" onChange='runScript(this.value)'>

我该如何为我工作？

Answer 1

这样的方法可能会有所帮助，在您调用sql获取数据并加载文本输入元素之后，调用var initValue = document.getElementById('name').value; 和runScript(initValue); 手动调用该函数。

 <input type="hidden" class="form-control" id="name" onChange='runScript(this.value)' value="test value"> <script> function runScript(value) { console.log('value--->' + value); } //get init value var initValue = document.getElementById('name').value; //init window.onload = runScript(initValue); </script> 

Answer 2

从JavaScript设置文本字段（或textarea）的值不会触发更改事件。

如果要调用事件处理程序，则必须在设置更改事件的文本后手动触发它。

请参阅如何触发JavaScript事件点击

您可以执行丹尼尔建议的操作 （直接调用更改处理程序功能），但这意味着如果有多个更改处理程序，则必须手动调用它们。 即使您将来添加更多处理程序，甚至动态添加此处理程序，该解决方案都可以使用。

 /** * Fire an event handler to the specified node. Event handlers can detect that the event was fired programatically * by testing for a 'synthetic=true' property on the event object * @param {HTMLNode} node The node to fire the event handler on. * @param {String} eventName The name of the event without the "on" (eg, "focus") */ function fireEvent(node, eventName) { // Make sure we use the ownerDocument from the provided node to avoid cross-window problems var doc; if (node.ownerDocument) { doc = node.ownerDocument; } else if (node.nodeType == 9) { // the node may be the document itself, nodeType 9 = DOCUMENT_NODE doc = node; } else { throw new Error("Invalid node passed to fireEvent: " + node.id); } if (node.dispatchEvent) { // Gecko-style approach (now the standard) takes more work var eventClass = ""; // Different events have different event classes. // If this switch statement can't map an eventName to an eventClass, // the event firing is going to fail. switch (eventName) { case "click": // Dispatching of 'click' appears to not work correctly in Safari. Use 'mousedown' or 'mouseup' instead. case "mousedown": case "mouseup": eventClass = "MouseEvents"; break; case "focus": case "change": case "blur": case "select": eventClass = "HTMLEvents"; break; default: throw "fireEvent: Couldn't find an event class for event '" + eventName + "'."; break; } var event = doc.createEvent(eventClass); event.initEvent(eventName, true, true); // All events created as bubbling and cancelable. event.synthetic = true; // allow detection of synthetic events // The second parameter says go ahead with the default action node.dispatchEvent(event, true); } else if (node.fireEvent) { // IE-old school style, you can drop this if you don't need to support IE8 and lower var event = doc.createEventObject(); event.synthetic = true; // allow detection of synthetic events node.fireEvent("on" + eventName, event); } }; function changeText() { var textField = document.getElementById('name'); textField.value = 'yo'; fireEvent(textField, 'change'); } 

 <input type="text" class="form-control" id="name" onchange="console.log('changed')" /> <button onclick="changeText()">Change text</button> 

Answer 3

在用于填充文本区域的函数中，只需添加

this.onchange();

这就是您将手动更改值时触发的事件！