HTMLInputElement: phương thức showPicker()

Cú pháp

showPicker()

Tham số

Không có.

Giá trị trả về

Không có (undefined).

Ngoại lệ

InvalidStateError DOMException

Ném ra nếu phần tử không thể thay đổi, nghĩa là người dùng không thể sửa đổi nó và/hoặc nó không thể được điền sẵn tự động.

NotAllowedError DOMException

Ném ra nếu không được kích hoạt rõ ràng bởi hành động người dùng như cử chỉ chạm hoặc nhấp chuột (bộ chọn yêu cầu Transient activation).

SecurityError DOMException

Ném ra nếu được gọi trong iframe cross-origin, ngoại trừ bộ chọn tệp và màu (được miễn trừ vì lý do lịch sử).

Bảo mật

Yêu cầu kích hoạt người dùng tạm thời. Người dùng phải tương tác với trang hoặc phần tử UI để tính năng này hoạt động.

Ví dụ

Phát hiện tính năng

Đoạn mã dưới đây cho thấy cách kiểm tra xem showPicker() có được hỗ trợ không:

if ("showPicker" in HTMLInputElement.prototype) {
  // showPicker() được hỗ trợ.
}

Bộ chọn đầu vào thông thường

Ví dụ này cho thấy cách tính năng này có thể được sử dụng cho bộ chọn đầu vào color và file.

HTML

<p>
  <input type="color" />
  <button id="color">Hiện bộ chọn màu</button>
</p>

<p>
  <input type="file" />
  <button id="file">Hiện bộ chọn tệp</button>
</p>

JavaScript

Đoạn mã chỉ đơn giản lấy phần tử trước nút đã chọn và gọi showPicker() trên nó.

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

Kết quả

Nhấp vào nút bên cạnh mỗi loại đầu vào để hiển thị bộ chọn của nó.

showPicker() cho đầu vào datalist

showPicker() có thể khởi chạy bộ chọn cho danh sách các tùy chọn được định nghĩa trong <datalist>.

Đầu tiên chúng ta định nghĩa một <datalist> trong HTML gồm một số trình duyệt internet, một đầu vào loại text sử dụng nó và một nút.

<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>Chọn trình duyệt</button>

Đoạn mã dưới đây thêm trình lắng nghe sự kiện gọi showPicker() khi nút được nhấp.

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

button.addEventListener("click", () => {
  try {
    browserInput.showPicker();
  } catch (error) {
    // Quay lại cơ chế bộ chọn khác
  }
});

Như các bộ chọn khác, chúng ta không thể hiển thị mã này chạy dưới dạng ví dụ trực tiếp vì nó chạy trong khung cross-origin, và sẽ gây ra SecurityError.

showPicker() cho autocomplete

showPicker() có thể khởi chạy bộ chọn cho đầu vào autocomplete.

Ở đây chúng ta định nghĩa một đầu입 nhận tùy chọn autocomplete là "name".

<input autocomplete="name" /> <button>Hiện tùy chọn autocomplete</button>

Đoạn mã dưới đây hiển thị bộ chọn cho đầu vào khi nút được nhấp.

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

button.addEventListener("click", () => {
  try {
    browserInput.showPicker();
  } catch (error) {
    // Quay lại cơ chế bộ chọn khác
  }
});

Đặc tả kỹ thuật

Tương thích trình duyệt

Xem thêm

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