文本框中的文本更改時的運行事件

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();

這就是您將手動更改值時觸發的事件！