更改事件侦听器中的setAttribute不会更新视图

Question

我正在尝试对在其自己的Web组件中构造的文本字段使用“默认”字符串。默认情况下，我定义一个字符串，当文本字段为空时将完全重新打印。输入元素引用上的setAttribute确实会更改文本字段值，但不会更新视图。另一方面，通过事件目标访问值也是如此，即使它们都引用同一个元素-至少据我所知。

问题在提供的代码段中很明显。

先谢谢了。

class editForm extends HTMLDivElement {
  static get observedAttributes() {
    return ["data-source"];
  }
  constructor() {
    self = super();
    let firstTerm = document.createElement("input");
    firstTerm.setAttribute("type", "text");
    firstTerm.setAttribute("class", "form-control mr-2");
    firstTerm.setAttribute("aria-label", "Source Term");
    firstTerm.setAttribute("value", this.getAttribute("data-source"));

    firstTerm.addEventListener("change", (e) => {
      let input = e.target.value;

      if (input.trim() === "") {
        //this line alone does not suffice to update the printed text field value
        firstTerm.setAttribute("value", this.getAttribute("data-source"));
        input = this.getAttribute("data-source");
        //commenting out the following line results in the data-source string
        //not being reprinted within the text field
        e.target.value = input;
      }
    });

    self.appendChild(firstTerm);
  }

}
customElements.define("edit-form", editForm, {
  extends: "div",
});

<div is='edit-form' data-source='test'></div>

Answer 1

您可能想要input或keyup事件。

上的change事件仅在Enter键输入后或字段失去焦点时才会触发

来源：Change Event:

另外请注意：由于data-source前缀，您的data-成为数据属性

因此this.getAttribute("data-source")可以写为：this.dataset.source

https://developer.mozilla.org/en-US/docs/Learn/HTML/Howto/Use_data_attributes