How to position the cursor and get the last position of the cursor in the html edit box

created at 07-15-2021 views: 3

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>
Please log in to leave a comment.