JS manually control the cursor position of the input box

Features: Click on the external option to bring the text in, and the cursor after the last position (similar to the phone keyboard click)

Two different scenarios:

1. Focus does not enter the text box or in the text box finally, click on the outside and then directly add the content to the back and then follow the cursor;

Note: The cursor position may be inconsistent with the focus position, the cursor can be at most close to the right border,

2. Focus in the text box and the cursor in the middle of the existing text, example 123, after 1, add 4 after the display 1423 and the cursor after 4;

Show me the project code I'm using (in angular's dynamic form)

getconputation (item) {ConstFormmodel = This. formmodel.value['RULE_RESULT4']; The contents of the text box are now in the controllerConstValue ='{'+ item['name'] +'}';//What to addConstElement = $ ('#calculate Input')[0]; Input Box ObjectConstNewvalleft = formmodel.substring (0, Element.selectionstart); Stitching, to the left of the new valueConstNewvalright =formmodel.substring (Element.selectionstart, formmodel.length); Stitching, to the right of the new valueConstNewValue = newvalleft + value +newvalright;//Add new values to the left, insert values, and right-stitch togetherConstNewLocation = Element.selectionstart +value.length;//The new position of the cursor (previous position plus the length of the insertion value) This. Formmodel.patchvalue ({'RULE_RESULT4': NewValue}); Assign a new value to the text box This. AddRange (NewLocation, newvalue, Element); Control cursor Position}//Control cursor PositionAddRange (newlocation, newvalue, Element) {Element.value= NewValue;//Update the value of the input box elementThe . focus ();//The input box gets the focus, but when the text is too long, the text ends up with the cursor not on the right side of the input box, but hides the element. SelectionStart = Element.selectionend =newlocation;//update cursor position, assign the new position to the input box cursor
}

Explanation: The Selection object represents the text range selected by the user or the current position of the caret. To obtain a Selection object for inspection or modification, use the window.getselection ()

SELECTIONSATRT record last start position, Selectionend record end position

Change the value of the text box to the base of the new value to control the cursor position

JS manually control the cursor position of the input box