在 HTML 中，輸入欄位用於取得使用者的輸入。有時，我們需要在輸入中獲取字串或長文字訊息。在這些場景中，使用者可能需要轉到輸入欄位的末尾來新增更多內容或訊息。因此，我們應該設定一些東西，以便使用者可以點擊按鈕，可以轉到輸入欄位的末尾。在本教程中，我們將學習使用 JavaScript 將遊標位置放置在輸入欄位中文字的末尾。
setSelectionRange() 方法用於選擇輸入欄位中的文字。需要兩個參數來開始和結束選擇。我們可以使用 setSelectionRange() 方法選擇最後一個字符，將遊標置於文字末尾。
使用者可以依照下列語法使用setSelectionRange()方法將遊標置於文字末端。
input.setSelectionRange(len, len);
在上面的語法中，輸入是我們在 JavaScript 中存取的 HTML 元素。 “len”是輸入值的長度。
在下面的範例中，我們建立了輸入欄位和按鈕。當使用者單擊該按鈕時，它會執行 moveAtend() 函數。
在 JavaScript 中，我們定義了 moveAtend() 函數，該函數存取「名稱」輸入欄位。之後，它使用 focus() 方法將焦點設定在輸入欄位上。之後，我們透過將輸入值的長度作為兩個參數傳遞來使用 setSelectionRange() 方法。在輸出中，使用者可以單擊該按鈕並觀察它將遊標位置設定在文字末尾。
<html>
<body>
<h3> Using the <i> setSelectionRange() method </i> to move the cursor at the end of the input field in JavaScript </h3>
<input type = "text" id = "name" value = "Shubham">
<button onclick = "moveAtend()"> Move cursor at end </button>
<script>
let output = document.getElementById("output");
function moveAtend() {
let name = document.getElementById("name");
name.focus();
name.setSelectionRange(name.value.length, name.value.length);
}
</script>
</html>
「selectionStart」和「selectionEnd」CSS 屬性用於選擇輸入欄位中的輸入值。 「selectionStart」採用從開始選擇的位置開始的索引值，「selectionEnd」採用我們需要結束文字選擇的索引值。
在這裡，我們可以將「selectionStart」和「selectionEnd」屬性的值設為等於文字長度，以將遊標置於文字末尾。
使用者可以依照下列語法使用「selectionStart」和「selectionEnd」屬性將遊標置於文字末端。
input.selectionStart = len; input.selectionEnd = len;
在上面的語法中，input是一個HTML元素，‘len’是它的值的長度。
與第一個範例一樣，我們在下面的範例中建立了輸入欄位。在 moveAtend() 函數中，我們將「selectionStart」和「selectionEnd」屬性的值設定為等於「name」輸入欄位的文字長度。
<html>
<body>
<h3> Using the <i> selectionStart and selectionEnd Properties </i> to move the cursor at the end of the input field in JavaScript </h3>
<input type = "text" id = "name" value = "Shubham">
<button onclick = "moveAtend()"> Move cursor at end </button>
<script>
let output = document.getElementById("output");
function moveAtend() {
let name = document.getElementById("name");
name.focus();
name.selectionStart = name.value.length;
name.selectionEnd = name.value.length;
}
</script>
</html>
我們學習了兩種將遊標置於輸入欄位中文字值末端的方法。在第一種方法中，我們使用了 setSelectionRange() 方法；在第二種方法中，我們使用了「selectionStart」和「selectionEnd」屬性。但是，這兩種方法幾乎相同，setSelectionRange() 方法將「selectionStart」和「selection」結束值作為參數。
以上是如何使用 JavaScript 將遊標位置放置在文字輸入欄位中的文字末尾？的詳細內容。更多資訊請關注PHP中文網其他相關文章！
