Placing cursor in textbox at specified length

Question

Possible Duplicate:
Set cursor at a length of 14 onfocus of a textbox

I have a code which lays the focus selecting certain length of substring in the text box. I want to place the cursor instead of selecting the entire string. the code is as below

<script type="text/javascript">
window.onload = function() {
    $("#message").keyup(function(e){
        var message = document.getElementById('message');
        // Select a portion of text
        createSelection(message, 0, 5);

        // get the selected portion of text
        var selectedText = message.value.substring(message.selectionStart, message.selectionEnd);
        alert(selectedText);
    });
    function createSelection(field, start, end) {
    if( field.createTextRange ) {
        var selRange = field.createTextRange();
        selRange.collapse(true);
        selRange.moveStart('character', start);
        selRange.moveEnd('character', end-start);
        selRange.select();
    } else if( field.setSelectionRange ) {
        field.setSelectionRange(start, end);
    } else if( field.selectionStart ) {
        field.selectionStart = start;
        field.selectionEnd = end;
    }
    field.focus();
    }}

</script>

HTML part of the code

<input type="text" name="message" id="message" value="" />

http://stackoverflow.com/questions/1865563/set-cursor-at-a-length-of-14-onfocus-of-a-textbox — Igor Shastin, Oct 11 '12 at 06:58
I already have created similar solution but the solution adds a selection part where the text is marked in blue and further if you type those string will be substituted. I am looking at a solution which get the cursor blinking at a specific position of the text. — teenu, Oct 11 '12 at 07:24
Your code is already good. All you need is to change `createSelection(message, 0, 5);` to `createSelection(message, 5, 5);` — Igor Shastin, Oct 11 '12 at 09:12

score 1 · Accepted Answer · edited May 23 '17 at 12:02

I've created a simple jQuery plugin function based on answers from this topic.

$.fn.setCursorPos = function(position) {
    return this.each(function() {
        var node = this;

        node.focus();

        if (node.setSelectionRange) {
            node.setSelectionRange(position, position);
        } else if (node.createTextRange) {
            var textRange = node.createTextRange();
            textRange.collapse(true);
            textRange.move('character', position);
            textRange.select();
        }
        node.selectionStart = position;
    });
};

Demo on jsFiddle.

score 0 · Answer 2 · edited May 23 '17 at 11:54

0

You can define a setCursor function :

function setCursor(node,pos){

    var node = (typeof node == "string" || node instanceof String) ? document.getElementById(node) : node;

    if(!node)
        return false;
    else if(node.createTextRange)
    {
        var textRange = node.createTextRange();

        textRange.collapse(true);
        textRange.moveEnd(pos);
        textRange.moveStart(pos);
        textRange.select();
        return true;
    }
    else if(node.setSelectionRange)
    {
        node.setSelectionRange(pos,pos);
        return true;
    }

    return false;
}

Using in your script :

field.focus(function(){
   var done = setCursor(message, 3);
   // you can check the done boolean if you want ...
});

Sources

edited May 23 '17 at 11:54

Community

1
1

answered Oct 11 '12 at 07:52

MyBoon

1,290
1
10
18

Man, you've just copied this code from nemisj's answer! http://stackoverflow.com/questions/1865563/set-cursor-at-a-length-of-14-onfocus-of-a-textbox – Igor Shastin Oct 11 '12 at 08:38
This is why I've mentioned the sources ... – MyBoon Oct 11 '12 at 08:42
Ok, you changed it. Thanks. But as @Shishir pointed in comments above, this solution doesn't meet his needs. – Igor Shastin Oct 11 '12 at 08:46

score 0 · Answer 3 · answered Oct 11 '12 at 09:14

Seeing the idea of @My_Boon, I altered my own code. Just changed two parameters and here it is with the new answer. I just changed

else if( field.setSelectionRange ) {
        field.setSelectionRange(end, end);
    } else if( field.selectionStart ) {
        field.selectionStart = end;
        field.selectionEnd = end;
    }

field.setSelectionRange(end, end); this line was `field.setSelectionRange(start, end);`

Placing cursor in textbox at specified length

3 Answers3