关于javascript：CreateTextRange在Chrome中不起作用


CreateTextRange is not working in Chrome

在此代码中，createRange在Chrome中不起作用。 在IE中，它正在工作。 请帮助解决此问题。 是否还有其他属性可以工作，例如创建范围。 这样对我的项目会有帮助。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
<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
      }
    }

CreateTextRange是Microsoft特定的功能，但是可以轻松解决。

例如，使用createRange代替此帖子：

1
2
3
4
5
6
7
8
9
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);
}
相关讨论

节点的JSDOM和codemirror(尝试使用document.createRange)遇到了这个问题

发生这种情况是因为document.createRange(chrome)在JSDOM上不存在ATM，因此它尝试改用document.body.createTextRange(IE)并失败了。

为了解决这个问题，我必须在单元测试设置中将document.createRange函数存根如下：

1
2
3
4
5
6
7
global.document.createRange = () => {
  return {
    setEnd: () => {},
    setStart: () => {},
    getBoundingClientRect: () => {}
  }
}

关于JSDOM polyfilling document.createRange的讨论：

参见https://github.com/tmpvar/jsdom/issues/399

在撰写本文时，这还没有发生。

createTextRange仅在IE中。

看看这个
http://help.dottoro.com/ljrvjsfe.php

相关讨论

截至2020年3月31日。适用于模拟JSDOM进行开玩笑的单元测试

1
2
3
4
5
6
7
8
(window as any).global.document.createRange = () => {
    return {
        setEnd: () => {},
        setStart: () => {},
        getBoundingClientRect: () => {},
        getClientRects: () => []
    };
};