js定位遊標到輸入框指定位置實例分享

在提供友善使用者介面時，常常要定位遊標到輸入框的指定位置。通常是尾部，好讓使用者接著輸入資訊。我們可以用javascript操作dom來實現，以下是實作的方法

   function changeCursor(input, position) {   
2.             var range = input.createTextRange();   
3.             range.collapse(true);   
4.             range.moveStart('character', position);   
5.             range.select();   
6.       }  
7.       //在需要的地方调用此函数，比如 
8.       onfocus="positionCursor(this, this.length)"
functionchangeCursor(input, position) {  
      var range = input.createTextRange();  
      range.collapse(true);  
      range.moveStart('character',position);  
      range.select();  
}

//在需要的地方呼叫此函數，例如

onfocus="positionCursor(this,this.length)"

#其中createTextRange 為元素建立一個TextRange##物件

下面的表格列出了TextRange 物件的屬性及方法，另外大家可以參考w3c的文檔
方法描述
#compareEndPoints ：比較  TextRange 物件的結束點和其它範圍的結束點。
duplicate ：傳回TextRange 的副本。
execCommand ：在目前文件、目前選取區或給定範圍上執行指令。
expand ：擴充範圍以便完全包含指定單位的範圍。
findText ：在文字中搜尋文字並將範圍的開始和結束點設定為包圍搜尋字串。
getBookmark： 取得可用來讓 moveToBookmark #傳回相同範圍的書籤(白底字串)#。
getBoundingClientRect：取得指定 TextRectangle 物件集合綁定的物件。
getClientRects：取得描述物件內容或客戶區內佈局的矩形集合。每個矩形都描述了一條直線。
inRange ：傳回一個範圍是否被另一個範圍包含。
isEqual ：傳回指定範圍是否與目前範圍相等。
move ：折疊給定文字範圍並將空範圍移動給定單位數。
moveEnd：更改範圍的結束位置。
moveStart ：變更範圍的開始位置。
moveToBookmark：移到書籤。
#moveToElementText：移動文字範圍以便範圍的開始和結束位置能夠完全包含給定元素的文字。
moveToPoint ：將文字範圍的開始和結束位置移到給定點。
parentElement ：取得給定文字範圍的父元素。
pasteHTML ：將HTML 文字貼入給定文字範圍，取代範圍內任何先前的文字和  HTML 元素。
queryCommandEnabled：傳回表示指定指令是否可於給定文件目前狀態下使用 execCommand #指令成功執行的Boolean 值。
queryCommandIndeterm ：傳回表示指定指令是否處於模糊狀態的 Boolean 值。
queryCommandState ：傳回表示指令目前狀態的Boolean 值。
queryCommandSupported：傳回表示目前指令是否在目前區域上支援的 Boolean #值。
queryCommandValue：傳回文件、範圍或目前選取區對於給定指令的目前值。
scrollIntoView：將物件捲動到可見範圍內，將其排列到視窗頂部或底部。
select ：將目前選取區置為目前物件。
setEndPoint：根據其它範圍的結束點設定某個範圍的結束點。

屬性描述
boundingHeight： 取得綁定 TextRange  物件的矩形的高度。
boundingLeft ：取得綁定 TextRange 物件的矩形左邊緣與包含 TextRange  物件的左側之間的距離。
boundingTop ：取得綁定 TextRange 物件的上方邊緣與包含 TextRange 物件的頂邊之間的距離。
boundingWidth ：Retrieves the width ofthe rectangle that bounds the TextRange object.
htmlText ：取得綁定##TextRange 物件的矩形的寬度。
offsetLeft ：取得物件相對於版面或由 offsetParent 屬性指定的父座標的計算左側位置。
offsetTop ：取得物件相對於版面或由 offsetTop 屬性指定的父座標的計算頂端位置。
text ：設定或取得範圍內包含的文字。

相關建議：

input輸入方塊中的遊標大小顯示不一致應該怎麼解決

利用css隱藏input的遊標方法

JavaScript自訂文字方塊遊標的程式碼詳情

以上是js定位遊標到輸入框指定位置實例分享的詳細內容。更多資訊請關注PHP中文網其他相關文章！