Question

我有一个从我的数据库中填充的文本框。我希望在文本框中的文本更改时运行JavaScript。我正在使用事件<input type="hidden" class="form-control" id="name" onChange='runScript(this.value)'>，但这不起作用。仅当我手动更改文本框中的文本时，它才会运行脚本。不是从数据库填充（没有按键或选择）。

这是我的文本框：

fact(car, color, blue).
true.

我怎样才能让这个为我工作？

Answer 1

这样的方法可能会有所帮助，在调用sql获取数据并加载文本输入元素后，请调用//In services.ts import { Injectable } from '@angular/core'; import { Http, Headers, RequestOptions } from '@angular/http'; import 'rxjs/Rx'; @Injectable() export class DataService { constructor(private http: Http) { } fetch(){ return this.http.get('json-object-link').map( (res) => res.json() ) } } //In component ngOnInit() { this.dataService.fetch() .subscribe( (data) => this.ninjas = data ); }和var initValue = document.getElementById('name').value;手动调用该函数。

＆＃13;

runScript(initValue);

＆＃13;

Answer 2

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

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

请参阅How can I trigger a JavaScript event click

您可以执行Daniel suggested（直接调用您的更改处理函数），但这意味着如果有多个更改处理程序，您必须手动调用它们。即使您将来添加更多处理程序，甚至动态添加处理程序，此解决方案仍然有效。

/**
 * 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" (e.g., "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

在用于填充textarea的函数中，只需添加

即可

this.onchange();

当您手动更改值时，它会调用触发的事件！

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

3 个答案: