首頁 >web前端 >js教程 >如何使用 JavaScript 將遊標位置放置在文字輸入欄位中的文字末尾？

如何使用 JavaScript 將遊標位置放置在文字輸入欄位中的文字末尾？

王林轉載: 2023-08-27 14:09:171252瀏覽

如何使用 JavaScript 将光标位置放置在文本输入字段中的文本末尾？

在 HTML 中，輸入欄位用於取得使用者的輸入。有時，我們需要在輸入中獲取字串或長文字訊息。在這些場景中，使用者可能需要轉到輸入欄位的末尾來新增更多內容或訊息。因此，我們應該設定一些東西，以便使用者可以點擊按鈕，可以轉到輸入欄位的末尾。在本教程中，我們將學習使用 JavaScript 將遊標位置放置在輸入欄位中文字的末尾。

使用 setSelectionRange() 方法

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屬性

「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中文網其他相關文章！

JavaScript css html 字符串 len input

陳述：

本文轉載於：tutorialspoint.com。如有侵權，請聯絡admin@php.cn刪除

上一篇：如何在 TypeScript 中將字串轉換為數字？下一篇：如何在 TypeScript 中將字串轉換為數字？

看更多