• View our reviews on Hot Scripts
  • JS Tutorial

Recent Comments

Powered by Disqus

Back to articles

Cursor positions and text selections

For each input in every modern browser there are properties like selectionStart and selectionEnd using which we can easily manipulate cursor position and text selection. Every browser except IE. 

In IE you will have to deal with text ranges and there is no united way for textareas and input methods, so we'll need to create separate functions to handle input and textarea elements or create one function and determine whether element is input or textarea.

Here is an example function:
function get_selection(elem){
    var selection = new Object();
    if (document.selection) //for IE
        //if we have input element
        if(elem.nodeName.toLowerCase() == "input")
            //determine start position
            var r = document.selection.createRange().duplicate();
            r.moveEnd('character', elem.value.length);
            if (r.text == '')
                selection.start = elem.value.length;
                selection.start = elem.value.lastIndexOf(r.text);
            //determine end position
            var d = document.selection.createRange().duplicate();
            d.moveStart('character', -elem.value.length);
            selection.end = d.text.length;
            //for textareas
            var range = document.selection.createRange(); 
            var stored_range = range.duplicate(); 
            stored_range.moveToElementText( elem ); 
            stored_range.setEndPoint( 'EndToEnd', range ); 
            selection.start = stored_range.text.length - range.text.length; 
            selection.end = stored_range.text.length; 
    else if (elem.selectionStart || elem.selectionStart=='0')
        //most of other browsers just have these properties
        selection.start = elem.selectionStart;
        selection.end = elem.selectionEnd;
    alert(selection.start + '-' + selection.end);

Main problem with setting cursor is in multiline text area. Because using functions moveStart and moveEnd and applying it to "character", special symbols like "n" are counted as 2 characters, so position will be incorrect. To correct it, we need to count special characters in string and subtract this count from position, so every special character would count as one.

So here is how you set cursor position:

function set_cursor(elem, pos) {
    // IE Support
    if (document.selection) {
        //copying string
        var val = elem.value;
        //counting number of special characters
        var discard = val.length - val.replace(new RegExp("[n'"&\tbf]","g"), '').length;
        // Create empty selection range
        var range = elem.createTextRange(); 
        // Move selection start and end to 0 position
        // Move selection start and end to desired position counting each special character as one
        range.moveEnd('character', pos - discard); 
        range.moveStart('character', pos - discard);; 
    // Firefox support
        elem.selectionStart = pos;
        elem.selectionEnd = pos;
        elem.focus ();

An here is an example:

Input text:


You may also be interested in:

Powered by

blog comments powered by Disqus