HTMLInputElement: thuộc tính selectionEnd

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.

Thuộc tính selectionEnd của giao diện HTMLInputElement là một số đại diện cho chỉ mục cuối của văn bản được chọn. Nghĩa là, nó đại diện cho chỉ mục của ký tự ngay sau lựa chọn. Tương tự, khi không có lựa chọn, nó trả về offset của ký tự ngay sau vị trí con trỏ nhập văn bản hiện tại.

Note: Theo đặc tả biểu mẫu WHATWG, thuộc tính selectionEnd chỉ áp dụng cho các đầu vào loại text, search, URL, tel và password. Trong các trình duyệt hiện đại, ném ra ngoại lệ khi đặt thuộc tính selectionEnd trên các loại đầu vào còn lại. Ngoài ra, thuộc tính này trả về null khi truy cập thuộc tính selectionEnd trên các phần tử đầu vào không phải dạng văn bản.

Nếu selectionEnd nhỏ hơn selectionStart, thì cả hai đều được coi là giá trị của selectionEnd.

<!-- sử dụng selectionEnd trên phần tử đầu vào không phải văn bản -->
<label for="color">Thuộc tính selectionStart trên type=color</label>
<input id="color" type="color" />

<!-- sử dụng selectionEnd trên phần tử đầu vào văn bản -->
<fieldset>
  <legend>Thuộc tính selectionEnd trên type=text</legend>
  <label for="pin">Nhập PIN</label>
  <input type="text" id="pin" value="PIN không thể: 102-12-145" />
  <button id="pin-btn" type="button">Sửa PIN</button>
</fieldset>

JavaScript

const colorEnd = document.getElementById("color");
const text = document.querySelector("#pin");
const pinBtn = document.querySelector("#pin-btn");
const validPinChecker = /^\d{3}-\d{2}-\d{3}/g;
const selectionEnd = text.value.length;
const selectedText = text.value.substring(text.selectionStart, selectionEnd);

pinBtn.addEventListener("click", () => {
  const correctedText = selectedText.replace(validPinChecker, "");
  text.value = correctedText;
});

// mở console trình duyệt để xác nhận kết quả
console.log(colorEnd.selectionEnd); // Kết quả : null