CreateTextRange is not working in Chrome

Question

In this code, createRange is not working in Chrome. In IE it is working. Please help how to rectify in this. Is there any other property to work like create range. So that it will helpful for my project.

<script language=javascript>

    var isSelected;
    function markSelection ( txtObj ) {
      if ( txtObj.createTextRange ) {
        txtObj.caretPos = document.selection.createRange().duplicate();
        isSelected = true;
      }
    }

    function insertTag ( txtName, enclose ) {
        if(document.f_activity_email == null) {
            var tag = document.getElementById('EmailTokenID').value;
        }
        else {
            var formC = document.f_activity_email;
            var tag = formC.EmailTokenID.value;
        }
        var closeTag = tag;
        if ( enclose ) {
            var attribSplit = tag.indexOf ( ' ' );
            if ( tag.indexOf ( ' ' ) > -1 )
              closeTag = tag.substring ( 0, attribSplit );
        }
        if ( isSelected ) {
            var txtObj = eval ( "document.forms[0]." + txtName );
                if (txtObj.createTextRange && txtObj.caretPos) {
                    var caretPos = txtObj.caretPos;
                    caretPos.text = ( ( enclose ) ? "<"+tag+">"+caretPos.text+"</"+closeTag+">" : tag+caretPos.text );
                    markSelection ( txtObj );
                    if ( txtObj.caretPos.text=='' ) {
                     isSelected=false;
                    txtObj.focus();
                }
            }
      } else {
        // placeholder for loss of focus handler
      }
    }

score 20 · Answer 1 · edited Oct 09 '17 at 16:57

20

CreateTextRange is a Microsoft specific function, but there is an easy work around.

Use createRange instead as in this post for example:

if (document.selection) { //IE
    var range = document.body.createTextRange();
    range.moveToElementText(document.getElementById(containerid));
    range.select();
} else if (window.getSelection) { //others
    var range = document.createRange();
    range.selectNode(document.getElementById(containerid));
    window.getSelection().addRange(range);
}

edited Oct 09 '17 at 16:57

whitneyland

10,632
9
60
68

answered Jan 19 '17 at 13:39

GôTô

7,974
3
32
43

1

Hi, that link gets directed to https://developer.mozilla.org/en-US/docs/Web/API. – Cloud Jan 31 '20 at 15:09
well the answer is 3 years old – GôTô Feb 04 '20 at 10:01
Note that `document.selection` is not defined in IE11 but `createTextRange` is still available in some cases. – NetMage Jul 01 '21 at 18:36

score 5 · Answer 2 · answered Sep 26 '17 at 10:42

I had this issue with node's JSDOM and codemirror (which attempts to use document.createRange)

It happens because document.createRange (chrome) does not exist ATM on JSDOM and so it tries to use document.body.createTextRange (IE) instead and falls over.

To fix this I had to stub the document.createRange function in my unit test setup as follows:

global.document.createRange = () => {
  return {
    setEnd: () => {},
    setStart: () => {},
    getBoundingClientRect: () => {}
  }
}

There is talk about JSDOM polyfilling document.createRange:

See https://github.com/tmpvar/jsdom/issues/399

At the time of writing this has not yet happened.

score 3 · Answer 3 · answered Feb 05 '14 at 09:26

3

createTextRange is only in IE.

Have a look at this one http://help.dottoro.com/ljrvjsfe.php

answered Feb 05 '14 at 09:26

Sho

294
1
5

1

*"Is there any other property to work like create range?"* – nnnnnn Mar 03 '17 at 03:55

score 1 · Answer 4 · answered Apr 01 '20 at 05:56

As of March 31, 2020. This works for mocking JSDOM for jest unit tests

(window as any).global.document.createRange = () => {
    return {
        setEnd: () => {},
        setStart: () => {},
        getBoundingClientRect: () => {},
        getClientRects: () => []
    };
};

CreateTextRange is not working in Chrome

4 Answers4

Linked