principle:
Inside HTML, the cursor is an object, the object is only cursor when you select an element of time will appear.
When we went to click on an input box, when in fact it will produce a selected object -selection (that we can see the text into that zone of blue), selection in the Firefox browser can be used directly window.getSelection () acquisition, inside HTML, only a selection, and selection is an area you can imagine as a rectangle, it is the beginning and end of
When you click on an input box, or you switch to another input boxes, selection will follow the change. The cursor is inside the selection cursor called the range, is a fragment of the region, and selection, have a beginning point and an end point, when we press the left button to pull to the right of the text, to see the text turns blue, that is the beginning and end of the cursor, when we look at the direct point, the cursor blinking is only the start and end point of overlap.
Code:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title></title> <style>#edit{height:500px;width:500px;border:1px solid red;}</style> </head> <body> <div id="edit" contenteditable></div> <input type="text" id="emojiInput"> <button id="sendEmoji">添加字符串</button> <script> var edit = document.getElementById('edit' ) Var emojiInput = document.getElementById ( ' emojiInput ' ) var sendEmoji = document.getElementById ( ' sendEmoji ' ) // define the final cursor object var lastEditRange; // edit box click event edit.onclick = function () { // Get selected object var selection = the getSelection () // sets the last cursor object lastEditRange = selection.getRangeAt ( 0 ) } // edit key-release event frame edit.onkeyup = function () { //Get the selected object var Selection = the getSelection () // sets the last cursor object lastEditRange = selection.getRangeAt ( 0 ) } // expression click event sendEmoji.onclick = function () { // edit box focus edit.focus () / / Get the object selected var selection = the getSelection () // determines whether there exists last cursor object iF (lastEditRange) { // until all of the cursors and a reduced state and finally add the last cursor cursor object is present, remove the selected object selection.removeAllRanges ( ) selection.addRange (lastEditRange) } //Determining the range of the selected object or text edit box node IF (selection.anchorNode.nodeName! = ' #Text ' ) { // if edit box range. Expression is created text node insertion var emojiText = document.createTextNode (emojiInput.value) IF (edit.childNodes.length> 0 ) { // If the text box sub-element is greater than 0, then other elements, according to the position of the insert expression nodes for ( var I = 0 ; I <edit.childNodes.length; I ++ ) { IF (I == selection.anchorOffset) { edit.insertBefore (emojiText, edit.childNodes [I]) } } } The else { // or directly into an expression element edit.appendChild (emojiText) } // Create a new cursor object var Range = document.createRange () // range of cursor object definition for the new expression node range.selectNodeContents ( emojiText) // cursor is positioned at the position of the maximum length of the expression node range.setStart (emojiText, emojiText.length) // cursor start and end cursor overlapping range.collapse ( to true ) // remove all the selected objects cursor object selection. removeAllRanges () //Insert a new cursor object selection.addRange (Range) } the else { // If the node is a text cursor object to obtain var Range = selection.getRangeAt ( 0 ) // capture range of the cursor object defines the object, the object generally is textNode var textNode = range.startContainer; // Get cursor position var rangeStartOffset = range.startOffset; // text node to insert a new look at the contents of the cursor position textNode.insertData (rangeStartOffset, emojiInput.value) // move the cursor to add to the original position the length of the new content range.setStart (textNode, rangeStartOffset +emojiInput.value.length) // cursor start and end cursor overlapping range.collapse ( to true ) // remove all the selected objects cursor object selection.removeAllRanges () // Insert a new cursor object selection.addRange (Range) } / / anyway last record cursor object lastEditRange = selection.getRangeAt ( 0 ) } </ Script> </ body> </ HTML>
vue use:
1. lastEditRange (last cursor object) defines the common variable
2. div input box and click Bind keyup time, then add the click event function run
Reprinted from: https: //segmentfault.com/a/1190000005869372