How to position the cursor and get the last position of the cursor in the html edit box
In HTML, the cursor is an object, and the cursor object appears only when you select an element.
When we click on an input box, it will actually generate a selected object-selection (that is, the area where the text we can see turns blue). Selection can be directly used window.getSelection() in Firefox. Get, in HTML, there is only one selection, and selection is an area, you can imagine it as a rectangle, it has a beginning and an end.
When you click on an input box, or you switch to another input box, the selection will change accordingly. The cursor is in the selection. The cursor is called a range, which is a fragment area. Like selection, it has a start point and an end point. When we press the left button to pull the text to the right, we see that the text turns blue. That is the beginning and end of the cursor. When we click directly, the cursor is flashing, but the beginning and end points overlap.
Core method: getSelection() returns a Selection object, which is used to represent the current position of the text range or caret selected by the user
usage¶
selection = window.getSelection();
Code example¶
<!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">Send emoticons</button>
<script>
var sendEmoji = document.getElementById('sendEmoji');
// Define the last cursor object
var lastEditRange; // Edit box click event
document.getElementById('edit').onclick = function() { // Get selected object
var selection = getSelection() // Set the last cursor object
lastEditRange = selection.getRangeAt(0)
} // Edit box key up event
document.getElementById('edit').onkeyup = function() { // Get selected object
var selection = getSelection() // Set the last cursor object
lastEditRange = selection.getRangeAt(0)
} // Emoticon click event
document.getElementById('sendEmoji').onclick = function() { // Get the edit box object
var edit = document.getElementById('edit') // Get input box object
var emojiInput = document.getElementById('emojiInput') // Edit box set focus
edit.focus() // Get selected object
var selection = getSelection() // Determine whether the last cursor object exists
if (lastEditRange) { // There is the last cursor object, the selected object clears all cursors and adds the last cursor to restore the previous state
selection.removeAllRanges()
selection.addRange(lastEditRange)
} // Determine whether the selected object range is an edit box or a text node
if (selection.anchorNode.nodeName != '#text') { // If it is the edit box range. Then create an emoticon text node to insert
var emojiText = document.createTextNode(emojiInput.value)
if (edit.childNodes.length > 0) { // If the child element of the text box is greater than 0, it means there are other elements, and the emoticon node is inserted according to the position
for (var i = 0; i < edit.childNodes.length; i++) { if (i == selection.anchorOffset) {
edit.insertBefore(emojiText, edit.childNodes[i])
}
}
} else { // Otherwise directly insert an emoticon element
edit.appendChild(emojiText)
} // Create a new cursor object
var range = document.createRange() // The scope of the cursor object is defined as the newly created expression node
range.selectNodeContents(emojiText) // The cursor position is positioned at the maximum length of the emoticon node
range.setStart(emojiText, emojiText.length) // Make the cursor start and cursor end overlap
range.collapse(true) // Clear all cursor objects of the selected object
selection.removeAllRanges() // Insert a new cursor object
selection.addRange(range)
} else { // If it is a text node, get the cursor object first
var range = selection.getRangeAt(0) // Get the scope of the cursor object, generally the textNode object
var textNode = range.startContainer; // Get cursor position
var rangeStartOffset = range.startOffset; // The text node inserts new emoticon content at the cursor position
textNode.insertData(rangeStartOffset, emojiInput.value) // Move the cursor to the original position plus the length of the new content
range.setStart(textNode, rangeStartOffset + emojiInput.value.length) // The cursor start and cursor end overlap
range.collapse(true) // Clear all cursor objects of the selected object
selection.removeAllRanges() //Insert a new cursor object
selection.addRange(range)
} // Record the last cursor object anyway
lastEditRange = selection.getRangeAt(0)
} </script></body></html>
