HTMLInputElement: phương thức setSelectionRange()
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.
Phương thức HTMLInputElement.setSelectionRange() đặt vị trí bắt đầu và kết thúc của lựa chọn văn bản hiện tại trong phần tử <input> hoặc <textarea>. Phương thức này cập nhật trạng thái lựa chọn ngay lập tức, mặc dù phần đánh dấu trực quan chỉ xuất hiện khi phần tử được focus.
Tùy chọn, bạn có thể chỉ định hướng mà lựa chọn được coi là đã xảy ra. Điều này cho phép bạn chỉ định, ví dụ, rằng lựa chọn được đặt bằng cách người dùng nhấp và kéo từ cuối văn bản đã chọn về phía đầu.
Phương thức này cập nhật các thuộc tính HTMLInputElement.selectionStart, HTMLInputElement.selectionEnd, và HTMLInputElement.selectionDirection trong một lệnh gọi, bất kể phần tử có được focus hay không. Phần đánh dấu lựa chọn trực quan chỉ xuất hiện khi phần tử có focus.
Phần tử phải thuộc một trong các loại đầu vào sau: password, search, tel, text, hoặc url. Nếu không, trình duyệt sẽ ném ra ngoại lệ InvalidStateError.
Nếu bạn muốn chọn tất cả văn bản của phần tử đầu vào, bạn có thể sử dụng phương thức HTMLInputElement.select() thay thế.
Cú pháp
setSelectionRange(selectionStart, selectionEnd)
setSelectionRange(selectionStart, selectionEnd, selectionDirection)
Tham số
selectionStart-
Chỉ mục dựa trên 0 của ký tự đầu tiên được chọn. Một chỉ mục lớn hơn độ dài của giá trị phần tử được coi là trỏ đến cuối giá trị.
selectionEnd-
Chỉ mục dựa trên 0 của ký tự sau ký tự được chọn cuối cùng. Một chỉ mục lớn hơn độ dài của giá trị phần tử được coi là trỏ đến cuối giá trị. Nếu
selectionEndnhỏ hơnselectionStart, thì cả hai đều được coi là giá trị củaselectionEnd. selectionDirectionOptional-
Một chuỗi cho biết hướng mà lựa chọn được coi là đã được thực hiện. Các giá trị có thể:
"forward""backward""none"nếu hướng không xác định hoặc không liên quan. Giá trị mặc định.
Giá trị trả về
Không có (undefined).
Ngoại lệ
Ví dụ
Nhấp vào nút trong ví dụ này để chọn ký tự thứ ba, thứ tư và thứ năm trong hộp văn bản ("zil" trong từ "Mozilla").
HTML
<input type="text" id="text-box" size="20" value="Mozilla" />
<button>Chọn văn bản</button>
JavaScript
function selectText() {
const input = document.getElementById("text-box");
input.focus();
input.setSelectionRange(2, 5);
}
document.querySelector("button").addEventListener("click", selectText);
Kết quả
Đặc tả kỹ thuật
| Specification |
|---|
| HTML # dom-textarea/input-setselectionrange-dev |