jQuery Set Cursor Position in Text Area

前端 未结 16 1478
无人共我
无人共我 2020-11-21 11:42

How do you set the cursor position in a text field using jQuery? I\'ve got a text field with content, and I want the users cursor to be positioned at a certain offset when

相关标签:
16条回答
  • 2020-11-21 12:17

    I do realize that this is a very old post, but I thought that I should offer perhaps a simpler solution to update it using only jQuery.

    function getTextCursorPosition(ele) {   
        return ele.prop("selectionStart");
    }
    
    function setTextCursorPosition(ele,pos) {
        ele.prop("selectionStart", pos + 1);
        ele.prop("selectionEnd", pos + 1);
    }
    
    function insertNewLine(text,cursorPos) {
        var firstSlice = text.slice(0,cursorPos);
        var secondSlice = text.slice(cursorPos);
    
        var new_text = [firstSlice,"\n",secondSlice].join('');
    
        return new_text;
    }
    

    Usage for using ctrl-enter to add a new line (like in Facebook):

    $('textarea').on('keypress',function(e){
        if (e.keyCode == 13 && !e.ctrlKey) {
            e.preventDefault();
            //do something special here with just pressing Enter
        }else if (e.ctrlKey){
            //If the ctrl key was pressed with the Enter key,
            //then enter a new line break into the text
            var cursorPos = getTextCursorPosition($(this));                
    
            $(this).val(insertNewLine($(this).val(), cursorPos));
            setTextCursorPosition($(this), cursorPos);
        }
    });
    

    I am open to critique. Thank you.

    UPDATE: This solution does not allow normal copy and paste functionality to work (i.e. ctrl-c, ctrl-v), so I will have to edit this in the future to make sure that part works again. If you have an idea how to do that, please comment here, and I will be happy to test it out. Thanks.

    0 讨论(0)
  • 2020-11-21 12:17

    You can directly change the prototype if setSelectionRange does not exist.

    (function() {
        if (!HTMLInputElement.prototype.setSelectionRange) {
            HTMLInputElement.prototype.setSelectionRange = function(start, end) {
                if (this.createTextRange) {
                    var range = this.createTextRange();
                    this.collapse(true);
                    this.moveEnd('character', end);
                    this.moveStart('character', start);
                    this.select();
                }
            }
        }
    })();
    document.getElementById("input_tag").setSelectionRange(6, 7);
    

    jsFiddle link

    0 讨论(0)
  • 2020-11-21 12:25

    Just remember to return false right after the function call if you're using the arrow keys since Chrome fricks the frack up otherwise.

    {
        document.getElementById('moveto3').setSelectionRange(3,3);
        return false;
    }
    
    0 讨论(0)
  • 2020-11-21 12:26

    As for me here the most easily way to add text(Tab -> \t) in textarea by cursor position and save the focus on cursor:

    $('#text').keyup(function () {
        var cursor = $('#text').prop('selectionStart');
        //if cursot is first in textarea
        if (cursor == 0) {
            //i will add tab in line
            $('#text').val('\t' + $('#text').val());
            //here we set the cursor position
            $('#text').prop('selectionEnd', 1);
        } else {
            var value = $('#text').val();
            //save the value before cursor current position
            var valToCur = value.substring(0, cursor);
            //save the value after cursor current position
            var valAfter = value.substring(cursor, value.length);
            //save the new value with added tab in text
            $('#text').val(valToCur + '\t' + valAfter);
            //set focus of cursot after insert text (1 = because I add only one symbol)
            $('#text').prop('selectionEnd', cursor + 1);
        }
    });
    
    0 讨论(0)
提交回复
热议问题