document.selection.createRange() not working in chrome and safari

Question

I am using a textbox with textmode as multiline option its working fine in IE,Mozilla problem occurs in Chrome and safari. Sample code folows

<asp:TextBox ID="txtRootDescription" onpaste="DoPaste(this);" Width="600px" Rows="10" Columns="72" MaxLength="500" TextMode="MultiLine" runat="server"></asp:TextBox>

function DoPaste(control) {
maxLength = control.attributes["maxlength"].value;   
if (maxLength) {        
    var oTR = control.document.selection.createRange();     
}}

in chrome it gives me an error as "Cannot read property 'selection' of undefined"

Mrchief · Answer 1 · 2011-08-11T16:27:05.843

6

In non IE (excluding IE9) browsers (see comments), use window.getSelection to get the selection object. In IE < 9, original code should work.

function GetSelection () {
    if (window.getSelection) {  // all browsers, except IE before version 9
        var selectionRange = window.getSelection ();                                        
        return selectionRange.toString();
    } 
    else {
        if (document.selection.type == 'None') {
            return "";
        }
        else {
            var textRange = document.selection.createRange ();
            return textRange.text;
        }
    }
}

function DoPaste(control) {
    maxLength = control.attributes["maxlength"].value;   
    if (maxLength) {        
        var oTR = GetSelection();     
    }
}

In general, working with selection and ranges is very tricky as browser supports varies so much.

Here's an excellent reference which lists out browser support (and what code works where) and sample code that works in corresponding browsers: http://help.dottoro.com/ljefwsqm.php

edited Aug 11 '11 at 16:27

answered Aug 11 '11 at 06:12

Mrchief

75,126
20
142
189

In IE, your original code will work. If you check the reference, it tells you what code is supported in what browser. I find it very helpful and they have sample cross broswer code too. – Mrchief Aug 11 '11 at 06:19
Opera 10.5 supports `window.getSelection()` too. What distinction is there between Opera pre and post 10.5? – Tim Down Aug 11 '11 at 10:58
@Tim Down: Are you sure? Usually dottoro is right about the browser support thing. But anyway, I would check for `if(window.getSelection)` and not any specific browser version so if its there, the code would work. – Mrchief Aug 11 '11 at 13:57
@Mrchief: Yes, I'm sure. What I think has confused things is that according to dottoro, they removed `document.selection` in 10.5, but it definitely had `window.getSelection()` before that (I'm certain some version 9.x had it), so there was overlap. See http://help.dottoro.com/ljcvonpc.php – Tim Down Aug 11 '11 at 16:20
@Tim Down: I See. I edited my answer to reflect the same. Thx! – Mrchief Aug 11 '11 at 16:27

score 1 · Answer 2 · answered Aug 11 '11 at 06:15

There are a number of foibles when getting selected text in a document, mostly related to whether or not text is selected in a form control or as text of some other element. Try a function that does something like:

function checkForSelectedText(e) {
  var e = e || window.event;
  var el = e.target || e.srcElement;
  var tagName = el.tagName && el.tagName.toLowerCase();
  var t;
  var d = document;

  // Try DOM 2 Range - for most browsers, including IE 6+
  // However, doesn't get text selected inside form controls
  // that allow selection of text content (input type text, 
  // textarea)
  if (d && d.selection && d.selection.createRange) {
    t = d.selection.createRange().text;

  // Otherwise try HTML5 - note that getSelection returns
  // a string with extra properties. This may also get
  // text within input and textarea
  } else if (d.getSelection) {
    t = d.getSelection();
  }

  // If didn't get any text, see if event was inside
  // inupt@type=text or textarea and look for text
  if (t == '') {
    if (tagName == 'textarea' || 
       (tagName == 'input' && el.type == 'text')) {

     // Check selectionStart/End as otherwise if no text
     // selected, IE returns entire text of element
     if (typeof el.selectionStart == 'number' && 
         el.selectionStart != el.selectionEnd) {
        t = el.value.substring(el.selectionStart, el.selectionEnd)
     }
    }
  }
  return t;
}

score 0 · Answer 3 · answered Aug 11 '11 at 06:12

0

I would use JQuery to do the same because it's cross browser and you write more abstract java script instead of the native browser specific one your wrote so far.

answered Aug 11 '11 at 06:12

Davide Piras

43,984
10
98
147

1

What method in jQuery does that? This should be a comment anyway (unless improved upon). – Mrchief Aug 11 '11 at 06:13
1

Best jquery function for selecting text: http://stackoverflow.com/questions/985272/jquery-selecting-text-in-an-element-akin-to-highlighting-with-your-mouse/987376#987376 – drharris Aug 11 '11 at 06:18
1

@drharris - that function uses browser sniffing so if you turn up with a browser other than the 4 sniffed for, bad luck. – RobG Aug 11 '11 at 06:25
The answer below it mods it to use null checks instead of browser sniffing. – drharris Aug 11 '11 at 06:27
Selecting text is always not the same as working with ranges. – Mrchief Aug 11 '11 at 06:30

document.selection.createRange() not working in chrome and safari

3 Answers3

Linked