HTMLInputElement: метод showPicker()

Метод HTMLInputElement.showPicker() отображает браузерный выборщик для элемента input.

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

Браузеры обычно реализуют его для ввода следующих типов: "date", "month", "week", "time", "datetime-local", "color", или "file". Он также может быть предварительно заполнен элементами из элемента <datalist> или атрибута autocomplete.

В более общем случае, этот метод должен отображать выборщик для любого элемента ввода на платформе, имеющего выборщик.

Нет.

Нет (undefined).

InvalidStateError DOMException

Выбрасывается, если элемент не изменяем, то есть пользователь не может его изменить и/или его нельзя автоматически заполнить.

NotAllowedError DOMException

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

SecurityError DOMException

Выбрасывается, если вызывается в iframe с другим доменным именем, за исключением выборщиков файла и цвета (исключение по историческим причинам).

Требуется временное взаимодействие пользователя. Пользователь должен взаимодействовать со страницей или элементом пользовательского интерфейса для работы этой функции.

Ниже приведен код, показывающий, как проверить поддержку showPicker():

if ("showPicker" in HTMLInputElement.prototype) {
  // showPicker() is supported.
}

Этот пример показывает, как использовать эту функцию для выборщиков ввода color и file.

HTML

<p>
  <input type="color" />
  <button id="color">Show the color picker</button>
</p>

<p>
  <input type="file" />
  <button id="file">Show the file picker</button>
</p>

JavaScript

Код просто получает предыдущий элемент выбранной кнопки и вызывает showPicker() на нём.

document.querySelectorAll("button").forEach((button) => {
  button.addEventListener("click", (event) => {
    const input = event.srcElement.previousElementSibling;
    try {
      input.showPicker();
    } catch (error) {
      console.log(error);
    }
  });
});

Результат

Нажмите кнопку рядом с каждым типом ввода, чтобы отобразить его выборщик.

showPicker() может запустить выборщик для списка вариантов, определённых в <datalist>.

Сначала мы определяем <datalist> в HTML, состоящий из ряда интернет-браузеров, поля ввода типа text, которое его использует, и кнопки.

<datalist id="browsers">
  <option value="Chrome"></option>
  <option value="Firefox"></option>
  <option value="Opera"></option>
  <option value="Safari"></option>
  <option value="Microsoft Edge"></option>
</datalist>

<input type="text" list="browsers" />
<button>Select browser</button>

Код ниже добавляет обработчик событий, который вызывает showPicker() при нажатии кнопки.

const button = document.querySelector("button");
const browserInput = document.querySelector("input");

button.addEventListener("click", () => {
  try {
    browserInput.showPicker();
  } catch (error) {
    // Fall back to another picker mechanism
  }
});

showPicker() может запустить выборщик для атрибута autocomplete ввода.

Здесь мы определяем поле ввода, которое использует опцию автозаполнения «name».

<input autocomplete="name" /> <button>Show autocomplete options</button>

Код ниже показывает выборщик для поля ввода при нажатии кнопки.

const button = document.querySelector("button");
const browserInput = document.querySelector("input");

button.addEventListener("click", () => {
  try {
    browserInput.showPicker();
  } catch (error) {
    // Fall back to another picker mechanism
  }
});

• <input>
• HTMLInputElement
• HTMLSelectElement.showPicker()
• <datalist>
• autocomplete