js positions the cursor to the specified position of the input box to share an example

When providing a friendly user interface, it is often necessary to position the cursor at the specified position of the input box. Usually the tail, so that the user can continue to enter information. We can use javascriptoperationdom to achieve it. The following is the implementation method

   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();  
}

//Call this function where needed, such as

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

WherecreateTextRange Create a TextRange object for the element

The following table lists the properties and methods of the TextRange object. In addition, you can refer tow3cDocumentation
MethodDescription
compareEndPoints : Compare TextRange The end point of the object and the end points of other ranges.
duplicate : Returns a copy of TextRange .
execCommand : Execute the command on the current document, current selection, or given range.
expand : Expand the range to completely include the range of the specified unit.
findText : Search for text within text and set the start and end points of the range to surround the search string.
getBookmark：Gets the bookmarks that can be used to moveToBookmark return the same range(White background string).
getBoundingClientRect：Get the object bound to the specified TextRectangle object collection.
getClientRects：Get a collection of rectangles describing the content of the object or the layout within the client area. Each rectangle describes a straight line.
inRange : Returns whether a range is contained by another range.
isEqual : Returns whether the specified range is equal to the current range.
move : Collapse the given text range and move the empty range the given number of units.
moveEnd: Change the end position of the range.
moveStart : Change the starting position of the range.
moveToBookmark：Move to bookmark.
moveToElementText:Moves the text range so that the start and end positions of the range completely contain the text of the given element.
moveToPoint : Move the start and end positions of the text range to the given point.
parentElement : Get the parent element of the given text range.
pasteHTML : Pastes HTML text into the given text range, replacing any previous text and in the range HTML elements.
queryCommandEnabled：Returns whether the specified command can be used in the current state of the given document execCommand Boolean value for successful command execution.
queryCommandIndeterm : Returns a Boolean value indicating whether the specified command is in an ambiguous state.
queryCommandState : Returns a Boolean value indicating the current state of the command.
queryCommandSupported: Returns a Boolean value indicating whether the current command is supported on the current locale.
queryCommandValue: Returns the current value of the document, range, or current selection for the given command.
scrollIntoView: Scroll the object into the visible range, arranging it to the top or bottom of the window.
select : Set the current selection area as the current object.
setEndPoint：Set the end point of a range based on the end points of other ranges.

PropertiesDescription
boundingHeight：Get binding TextRange The height of the object's rectangle.
boundingLeft : Get the bounding TextRange The left edge of the rectangle of the object and the containing TextRange The distance between the left sides of the objects.
boundingTop : Get the binding TextRange The upper edge of the object and contain TextRange The distance between the top edges of objects.
boundingWidth ：Retrieves the width of the rectangle that bounds the TextRange object.
htmlText ：Get bindingTextRange The width of the rectangle of the object.
offsetLeft : Gets the calculated left position of the object relative to the layout or the parent coordinate specified by the offsetParent property.
offsetTop : Gets the calculated top position of the object relative to the layout or the parent coordinates specified by the offsetTop property.
text : Set or get the text contained in the range.

Related recommendations:

How to solve the inconsistent cursor size display in the input input box

Use css to hide the input cursor method

JavaScript custom text box cursor code details

The above is the detailed content of js positions the cursor to the specified position of the input box to share an example. For more information, please follow other related articles on the PHP Chinese website!