HTMLInputElement: thuộc tính popoverTargetAction

Giá trị

Một giá trị liệt kê. Các giá trị có thể là:

"hide"

Nút sẽ ẩn một popover đang hiển thị. Nếu bạn cố ẩn một popover đã ẩn, không có hành động nào được thực hiện.

"show"

Nút sẽ hiển thị một popover đang ẩn. Nếu bạn cố hiển thị một popover đang hiển thị, không có hành động nào được thực hiện.

"toggle"

Nút sẽ chuyển đổi một popover giữa trạng thái hiển thị và ẩn. Nếu popover đang ẩn, nó sẽ được hiển thị; nếu popover đang hiển thị, nó sẽ bị ẩn. Nếu popoverTargetAction không được đặt, "toggle" là hành động mặc định sẽ được thực hiện bởi nút điều khiển.

Ví dụ

Hành động bật/tắt popover với auto popover

Ví dụ này cho thấy cách sử dụng cơ bản của popover API với giá trị "toggle" được đặt cho thuộc tính popoverTargetAction. Thuộc tính popover được đặt thành "auto", nên popover có thể được đóng ("light-dismissed") bằng cách nhấp chuột bên ngoài vùng popover.

Đầu tiên chúng ta định nghĩa một <input> loại type="button" sẽ dùng để hiển thị và ẩn popover, và một <div> sẽ là popover. Trong trường hợp này chúng ta không đặt thuộc tính HTML popovertargetaction trên nút hoặc thuộc tính popover trên <div>, vì chúng ta sẽ làm điều đó bằng lập trình.

<input id="toggleBtn" type="button" value="Bật/tắt popover" />
<div id="mypopover">Đây là nội dung popover!</div>

Mã JavaScript đầu tiên lấy tham chiếu đến các phần tử <div> và <input>. Sau đó định nghĩa một hàm để kiểm tra hỗ trợ popover.

const popover = document.getElementById("mypopover");
const toggleBtn = document.getElementById("toggleBtn");

// Kiểm tra hỗ trợ popover API.
function supportsPopover() {
  return Object.hasOwn(HTMLElement.prototype, "popover");
}

Nếu popover API được hỗ trợ, mã đặt thuộc tính popover của phần tử <div> thành "auto" và biến nó thành mục tiêu popover của nút bật/tắt. Sau đó chúng ta đặt popoverTargetAction của nút thành "toggle". Nếu popover API không được hỗ trợ, chúng ta thay đổi nội dung văn bản của phần tử <div> để thông báo điều này và ẩn nút bật/tắt.

if (supportsPopover()) {
  // Đặt phần tử <div> thành auto popover
  popover.popover = "auto";
  // Đặt nút làm mục tiêu popover cho popover
  toggleBtn.popoverTargetElement = popover;

  // Đặt nút bật/tắt khả năng hiển thị popover
  toggleBtn.popoverTargetAction = "toggle";
} else {
  popover.textContent = "Popover API không được hỗ trợ.";
  toggleBtn.hidden = true;
}

Bạn có thể thử ví dụ dưới đây. Hiển thị và ẩn popover bằng cách bật/tắt nút. Popover "auto" cũng có thể được đóng bằng cách chọn bên ngoài giới hạn của văn bản popover.

Hành động hiển thị/ẩn popover với manual popover

Ví dụ này cho thấy cách sử dụng các giá trị "show" và "hide" của thuộc tính popoverTargetAction.

Mã gần giống hệt với ví dụ trước, ngoại trừ việc có hai phần tử <button>, và popover được đặt thành "manual". Popover manual phải được đóng rõ ràng và không thể "light dismissed" bằng cách chọn bên ngoài vùng popover.

<input id="showBtn" type="button" value="Hiện popover" />
<input id="hideBtn" type="button" value="Ẩn popover" />
<div id="mypopover">Đây là nội dung popover!</div>

function supportsPopover() {
  return Object.hasOwn(HTMLElement.prototype, "popover");
}

const popover = document.getElementById("mypopover");
const showBtn = document.getElementById("showBtn");
const hideBtn = document.getElementById("hideBtn");

const popoverSupported = supportsPopover();

if (supportsPopover()) {
  // Đặt phần tử <div> thành manual popover
  popover.popover = "manual";

  // Đặt mục tiêu của nút là popover
  showBtn.popoverTargetElement = popover;
  hideBtn.popoverTargetElement = popover;

  // Đặt hành động mục tiêu là show/hide
  showBtn.popoverTargetAction = "show";
  hideBtn.popoverTargetAction = "hide";
} else {
  popover.textContent = "Popover API không được hỗ trợ.";
  showBtn.hidden = true;
  hideBtn.hidden = true;
}

Popover có thể được hiển thị bằng cách chọn nút "Hiện popover", và đóng bằng nút "Ẩn popover".

Đặc tả kỹ thuật

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

Xem thêm

• Thuộc tính HTML toàn cục popover
• Popover API