Question

嘿，所以我正在使用范围，我试图限制用户可以在页面上进行的选择。我的意思是用户可以选择他想要的任何东西，但选择不能超过我将设置的边界。

首先，我用定义的范围定义“边界”。然后我将当前用户选择与定义的范围进行比较，如果当前选择开始低于边界或当前选择结束高于边界我相应调整，以便用户选择永远不会超出定义的边界范围/选择。

以下功能仅起作用如果我在进程开始之前输出警报，如果我删除警报，那么firefox表现得很奇怪（比如选择页面的其他部分等）

问题是：为什么以下代码适用于警报以及为什么没有警报就无法正常工作？

谢谢！

var range = document.createRange(); // this is the boundaries range
range.selectNodeContents(document.getElementById("container"));

function test(){
            alert("let's go"); // if I remove this alert, the code doesn't work as expected, WHY?!
            if(window.getSelection().rangeCount == 0){
                return;
            }
            var curRange = window.getSelection().getRangeAt(0);
            if(curRange.compareBoundaryPoints(Range.START_TO_START, range) < 0){
                curRange.setStart(range.startContainer,range.startOffset);
            }

           if(curRange.compareBoundaryPoints(Range.END_TO_END, range) > 0){
               curRange.setEnd(range.endContainer,range.endOffset);
            }
        }

Answer 1

首先，要在其他浏览器中工作（除了IE＆lt; = 8，这种方法完全不同），你需要重新选择范围。其次，要使其在Firefox中运行，您需要处理原始选定范围的克隆：

function test(){
    var sel = window.getSelection();
    if (sel.rangeCount == 0) {
        return;
    }
    var curRange = sel.getRangeAt(0).cloneRange();
    if (curRange.compareBoundaryPoints(Range.START_TO_START, range) < 0) {
        curRange.setStart(range.startContainer,range.startOffset);
    }
    if (curRange.compareBoundaryPoints(Range.END_TO_END, range) > 0) {
        curRange.setEnd(range.endContainer,range.endOffset);
    }
    sel.removeAllRanges();
    sel.addRange(curRange);
}

使用范围的奇怪的firefox / javascript行为

1 个答案: