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
      }
    }

Brandt

Answer 1

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);
}

Franciscofranciska

Hi, that link gets directed to developer.mozilla.org/en-US/docs/Web/API. – Castaway

well the answer is 3 years old – Longshore

Note that document.selection is not defined in IE11 but createTextRange is still available in some cases. – Kendakendal

Answer 2

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.

Shellishellie

Answer 3

createTextRange is only in IE.

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

Spoken

"Is there any other property to work like create range?" – Parentage

Answer 4

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: () => []
    };
};

Karykaryl