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

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

使用 setSelectionRange() 方法

setSelectionRange() 方法用於選擇輸入欄位中的文字。需要兩個參數來開始和結束選擇。我們可以使用 setSelectionRange() 方法選擇最後一個字符，將遊標置於文字末尾。

文法

使用者可以依照下列語法使用setSelectionRange()方法將遊標置於文字末端。

input.setSelectionRange(len, len);

在上面的語法中，輸入是我們在 JavaScript 中存取的 HTML 元素。 “len”是輸入值的長度。

範例

在下面的範例中，我們建立了輸入欄位和按鈕。當使用者單擊該按鈕時，它會執行 moveAtend() 函數。

在 JavaScript 中，我們定義了 moveAtend() 函數，該函數存取「名稱」輸入欄位。之後，它使用 focus() 方法將焦點設定在輸入欄位上。之後，我們透過將輸入值的長度作為兩個參數傳遞來使用 setSelectionRange() 方法。在輸出中，使用者可以單擊該按鈕並觀察它將遊標位置設定在文字末尾。

   
      
 Using the  setSelectionRange() method  to move the cursor at the end of the input field in JavaScript 
      
       Move cursor at end 
      

使用selectionStart和selectionEnd屬性

「selectionStart」和「selectionEnd」CSS 屬性用於選擇輸入欄位中的輸入值。 「selectionStart」採用從開始選擇的位置開始的索引值，「selectionEnd」採用我們需要結束文字選擇的索引值。

在這裡，我們可以將「selectionStart」和「selectionEnd」屬性的值設為等於文字長度，以將遊標置於文字末尾。

文法

使用者可以依照下列語法使用「selectionStart」和「selectionEnd」屬性將遊標置於文字末端。

input.selectionStart = len;
input.selectionEnd = len;

在上面的語法中，input是一個HTML元素，‘len’是它的值的長度。

範例

與第一個範例一樣，我們在下面的範例中建立了輸入欄位。在 moveAtend() 函數中，我們將「selectionStart」和「selectionEnd」屬性的值設定為等於「name」輸入欄位的文字長度。

   
      
 Using the  selectionStart and selectionEnd Properties  to move the cursor at the end of the input field in JavaScript 
      
       Move cursor at end 
      

結論

我們學習了兩種將遊標置於輸入欄位中文字值末端的方法。在第一種方法中，我們使用了 setSelectionRange() 方法；在第二種方法中，我們使用了「selectionStart」和「selectionEnd」屬性。但是，這兩種方法幾乎相同，setSelectionRange() 方法將「selectionStart」和「selection」結束值作為參數。

以上是如何使用 JavaScript 將遊標位置放置在文字輸入欄位中的文字末尾？的詳細內容。更多資訊請關注PHP中文網其他相關文章！