Создание настраиваемого поля ввода с веб-компонентами без внешней доступности - PullRequest
Новая
       31

Создание настраиваемого поля ввода с веб-компонентами без внешней доступности

0 голосов
/ 26 февраля 2019

Я хочу создать пользовательский ввод с помощью Shadow DOM 

class TextBox extends HTMLElement {

  constructor() {
    super();
    var shadow = this.attachShadow({ mode: 'open' });

    let textbox = document.createElement("input");
    shadow.appendChild(textbox);
    textbox.addEventListener("change", validate);

    function validate(event) {
      console.log("input can be validated");
    }
  }
  get value() {
    console.log("get");
    let textbox = this.shadowRoot.querySelector("input");
    return textbox.value;
  }
  set value(newValue) {
    console.log("set");
    let textbox = this.shadowRoot.querySelector("input");
    textbox.value = newValue;
  }
}
customElements.define('test-textbox', TextBox);

Должно быть возможно изменить значение отображаемого текстового поля с помощью js.Если я изменю свойство .value текстового поля, метод вызова не будет вызван?Я что-то упустил?

Позже я хочу включить текстовое поле с помощью шаблона в свое решение и иметь возможность установить значение текстового поля с помощью textbox.value ="Peter"

1 Ответ

0 голосов
/ 30 марта 2019

Внутреннее поле <input> отправляет событие input каждый раз, когда изменяется его значение.Это событие может быть записано либо в вашем компоненте, либо в коде, использующем ваш компонент.

Событие change происходит только в определенных ситуациях, поэтому лучшим вариантом будет событие input.

Приведенный ниже код показывает, как компонент прослушивает событие input, как и внешний код. 

function validate(event) {
  console.log("input can be validated");
}

class TextBox extends HTMLElement {
  constructor() {
    super();
    const shadow = this.attachShadow({ mode: 'open' });
    shadow.innerHTML = `
    <style>
      input {
        width: 300px;
      }
    </style>
    `;
    const textbox = document.createElement("input");
    shadow.appendChild(textbox);
    textbox.addEventListener("input", validate);
    textbox.focus();
  }

  get value() {
    console.log("get");
    let textbox = this.shadowRoot.querySelector("input");
    return textbox.value;
  }
  set value(newValue) {
    console.log("set");
    let textbox = this.shadowRoot.querySelector("input");
    textbox.value = newValue;
  }
}

customElements.define('test-textbox', TextBox);

const el = document.querySelector('test-textbox');
el.addEventListener("input", (evt) => {
  console.log('input event from the outside.');
});
<test-textbox></test-textbox>
...