15

I'm looking for a way to set a selection in a textarea in Internet Explorer. In other browsers, this works just fine:

textarea.selectionStart = start;
textarea.selectionEnd = end;

In IE, I assume I have to use createRange and adjust the selection somehow, but I cannot figure out how.

Extra bonus points for a link to a proper documentation about createRange and associated methods, MSDN isn't helping out much.

Tatu Ulmanen
  • 123,288
  • 34
  • 187
  • 185
  • +1 - I looked at this. I can't remember the details (sorry) but it's sticky. IE was being very unhelpful. I had to make some kind of compromise in my form design. – martinr Dec 30 '09 at 16:38

4 Answers4

18

This works for me:

<textarea id="lol">
noasdfkvbsdobfbgvobosdobfbgoasopdobfgbooaodfgh
</textarea>

<script>
var range = document.getElementById('lol').createTextRange();
range.collapse(true);
range.moveStart('character', 5);
range.moveEnd('character', 10);
range.select();
</script>

Useful links:

moveStart() at MSDN: http://msdn.microsoft.com/en-us/library/ms536623%28VS.85%29.aspx

moveEnd() at MSDN: http://msdn.microsoft.com/en-us/library/ms536620%28VS.85%29.aspx

watain
  • 4,838
  • 4
  • 34
  • 35
  • 3
    Excellent, it actually works. `moveEnd` apparently moves the selection relative to the start position, so it behaves differently than `.selectionEnd`. Great links, thanks! Hopefully the bonus points I promised will come through other people upvoting :) – Tatu Ulmanen Dec 30 '09 at 17:35
17

Try with

function select(e, start, end){
     e.focus();
     if(e.setSelectionRange)
        e.setSelectionRange(start, end);
     else if(e.createTextRange) {
        e = e.createTextRange();
        e.collapse(true);
        e.moveEnd('character', end);
        e.moveStart('character', start);
        e.select();
     }
}
select(document.getElementById('textarea_id'), 5, 10);
Rafael
  • 18,349
  • 5
  • 58
  • 67
  • 1
    +1 for creating a browser-aware function and moving the end first so no arithmetic isn't required. It's a shame I can't accept two answers as correct, watain was first and provided links :) – Tatu Ulmanen Dec 30 '09 at 17:38
  • 1
    Thank you. I know, watain was first and provided some links to documentation, so his answer is the one to be marked as accepted. – Rafael Dec 30 '09 at 18:26
  • The re-use of variable name 'e' threw me off, but I think I see what you are doing there. – MarkHu Jul 03 '12 at 20:32
  • Apparently `setSelectionRange()` is supported in IE9+: https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement/setSelectionRange – Sam Jun 14 '16 at 06:44
6

As already commented the move methods see the line separators as one character (\n) instead of two (\r\n). I have adjusted the routine to compensate for that:

function select(el, start, end) {
    el.focus();

    if (el.setSelectionRange) { 
        el.setSelectionRange(start, end);
    } 
    else { 
        if(el.createTextRange) { 
            var normalizedValue = el.value.replace(/\r\n/g, "\n");

            start -= normalizedValue.slice(0, start).split("\n").length - 1;
            end -= normalizedValue.slice(0, end).split("\n").length - 1;

            range=el.createTextRange(); 
            range.collapse(true);
            range.moveEnd('character', end);
            range.moveStart('character', start); 
            range.select();
        } 
    }
}
Sam
  • 40,644
  • 36
  • 176
  • 219
Benjamin Wegman
  • 465
  • 4
  • 15
0

Beware of line separators, move* methods see them as one character, but they are actually two - \r\n

johan yong
  • 1