JavaScript 光標位置的控制在前端開發中十分重要。它可以用于表單校驗、自動完成等應用場景。在本文中，我將介紹 JavaScript 中三種獲取和設置光標位置的方法并通過實際應用進行展示。 一、獲取光標位置 1.1 通過 selectionStart 和 selectionEnd 屬性獲取光標位置。 selectionStart 和 selectionEnd 屬性可以分別用來獲取選擇文本的起始位置和結束位置。如果文本沒有被選擇，則兩個屬性會返回相同的值，即插入符號位置的值。

在以上代碼中，當用戶輸入內容時，會觸發 getCursorPosition 函數。該函數獲取輸入框的選中位置并在控制臺中輸出。運行代碼后，在輸入框中移動光標，就能看到控制臺中輸出的光標位置變化了。 1.2 通過 document.activeElement.selectionStart 和 document.activeElement.selectionEnd 獲取光標位置 document.activeElement 返回當前獲得焦點的元素，可以與 selectionStart 和 selectionEnd 屬性一起使用來獲取文本的選中位置或插入位置的位置。

在這個例子中，我們使用了 document.activeElement 替代了之前的 document.getElementById。當輸入框獲得焦點時，會顯示當前光標的位置。 二、設置光標位置 2.1 通過設置 selectionStart 和 selectionEnd 屬性設置光標位置 和獲取光標位置一樣，我們可以通過設置 selectionStart 和 selectionEnd 來改變光標位置。

Set Cursor Position

在這個例子中，我們添加了一個按鈕，當點擊后，會將光標設置到輸入框的第二個字符位置。 2.2 通過 setSelectionRange 方法設置光標位置 在一些情況下我們可能需要同時設置文本的選中范圍，此時就可以使用 setSelectionRange 方法。

Set Cursor Position

在這個例子中，我們設置了文本的選中范圍為從第二個字符到第四個字符。這樣就可以實現同時選中一段文本并將光標設置到指定位置的需求。 結論 以上是 JavaScript 中操作光標位置的三種方法。了解這些方法可以幫助我們開發更加優雅且豐富多彩的前端應用。