范围选择和 Mozilla

发布于 2024-08-29 10:40:25 字数 1073 浏览 13 评论 0原文

我想指定 Firefox 选择一个范围。我可以使用 IE 轻松完成此操作，使用 range.select();。看起来 FFX 需要一个 dom 元素。我错了，还是有更好的方法来解决这个问题？

我首先获取文本选择，将其转换为范围（我认为？）并保存文本选择。这是我最初获得范围的地方：

    // Before modifying selection, save it
    var userSelection,selectedText = '';
    if(window.getSelection){
        userSelection=window.getSelection();
    }
    else if(document.selection){
        userSelection=document.selection.createRange();
    }
    selectedText=userSelection;
    if(userSelection.text){
        selectedText=userSelection.text;        
    }
    if(/msie|MSIE/.test(navigator.userAgent) == false){
        selectedText=selectedText.toString();
    }
    origRange = userSelection;

我后来更改了选择（成功）。我通过 IE 中的范围和 ffx 中的 dom ID 来实现。但在我这样做之后，我想将选择设置回原始选择。

这在 IE 中就像一个魅力：

setTimeout(function(){
    origRange.select();
},1000);

我想在 FFX 中做类似的事情：

var s = w.getSelection();
setTimeout(function(){
    s.removeAllRanges();
    s.addRange(origRange);
},1000);

不幸的是，FFX 一直不合作，这不起作用。有什么想法吗？

原文

I would like to specify that firefox select a range. I can do this easily with IE, using range.select();. It appears that FFX expects a dom element instead. Am I mistaken, or is there a better way to go about this?

I start by getting the text selection, converting it to a range (I think?) and saving the text selection. This is where I'm getting the range from initially:

    // Before modifying selection, save it
    var userSelection,selectedText = '';
    if(window.getSelection){
        userSelection=window.getSelection();
    }
    else if(document.selection){
        userSelection=document.selection.createRange();
    }
    selectedText=userSelection;
    if(userSelection.text){
        selectedText=userSelection.text;        
    }
    if(/msie|MSIE/.test(navigator.userAgent) == false){
        selectedText=selectedText.toString();
    }
    origRange = userSelection;

I later change the selection (successfully). I do so by range in IE and by a dom ID in ffx. But after I do that, I want to set back the selection to the original selection.

This works like a charm in IE:

setTimeout(function(){
    origRange.select();
},1000);

I would like to do something like this in FFX:

var s = w.getSelection();
setTimeout(function(){
    s.removeAllRanges();
    s.addRange(origRange);
},1000);

Unfortunately, FFX has not been cooperative and this doesn't work. Any ideas?

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

心奴独伤 2024-09-05 10:40:25

简短的回答是：IE 和其他浏览器在使用 JavaScript 选择文本的实现上有所不同（IE 有其专有的方法）。查看使用 JavaScript 选择文本。

另请参阅 MDC 上的 setSelectionRange。

编辑：做了一些测试用例后，问题就变得清晰了。

<!DOCTYPE html>
<html>   
  <head> 
    <meta charset="UTF-8">
    <title>addRange test</title>
    <style>
      #trigger { background: lightgreen }
    </style>
  </head>
  <body> 
    <p id="test">This is some (rather short) text.</p>
    <span id="trigger">Trigger testCase().</span>
    <script>
var origRange;

var reselectFunc = function () {
    var savedRange = origRange;
    savedRange.removeAllRanges();
    savedRange.addRange(origRange);
};

var testCase = function () {
    // Before modifying selection, save it
    var userSelection,selectedText = '';

    if(window.getSelection){
        userSelection=window.getSelection();
    }
    else if(document.selection){
        userSelection=document.selection.createRange();
    }
    selectedText=userSelection;
    if(userSelection.text){
        selectedText=userSelection.text;
    }
    if(/msie|MSIE/.test(navigator.userAgent) === false){
        /* you shouldn't do this kind of browser sniffing,
           users of Opera and WebKit based browsers
           can easily spoof the UA string */
        selectedText=selectedText.toString();
    }
    origRange = userSelection;

    window.setTimeout(reselectFunc, 1000);
};

window.onload = function () {
    var el = document.getElementById("trigger");
    el.onmouseover = testCase;
};
    </script>
  </body>
</html>

在 Firefox、Chromium 和 Opera 中测试此功能时，调试工具显示在 reselectFunc 中调用 removeAllRanges 后，savedRange 和 origRange< /code> 已重置。使用这样的对象调用 addRange 会导致 Firefox 中抛出异常：

未捕获的异常：[异常...
“无法转换 JavaScript 参数
arg 0 [nsISelection.addRange]"
NS结果：“0x80570009
（NS_ERROR_XPC_BAD_CONVERT_JS）”
位置：“JS框架::
文件:///home/mk/tests/addrange.html::
匿名 :: 第 19 行“数据：否]

无需说，在所有三个浏览器中都没有选择任何文本。

显然这是预期的行为。分配了 (DOM)Selection 对象的所有变量在调用 removeAllRanges。

The short answer is: IE and other browsers differ in their implementations of selecting text using JavaScript (IE has its proprietary methods). Have a look at Selecting text with JavaScript.

Also, see setSelectionRange at MDC.

EDIT: After making a little test case, the problem becomes clear.

<!DOCTYPE html>
<html>   
  <head> 
    <meta charset="UTF-8">
    <title>addRange test</title>
    <style>
      #trigger { background: lightgreen }
    </style>
  </head>
  <body> 
    <p id="test">This is some (rather short) text.</p>
    <span id="trigger">Trigger testCase().</span>
    <script>
var origRange;

var reselectFunc = function () {
    var savedRange = origRange;
    savedRange.removeAllRanges();
    savedRange.addRange(origRange);
};

var testCase = function () {
    // Before modifying selection, save it
    var userSelection,selectedText = '';

    if(window.getSelection){
        userSelection=window.getSelection();
    }
    else if(document.selection){
        userSelection=document.selection.createRange();
    }
    selectedText=userSelection;
    if(userSelection.text){
        selectedText=userSelection.text;
    }
    if(/msie|MSIE/.test(navigator.userAgent) === false){
        /* you shouldn't do this kind of browser sniffing,
           users of Opera and WebKit based browsers
           can easily spoof the UA string */
        selectedText=selectedText.toString();
    }
    origRange = userSelection;

    window.setTimeout(reselectFunc, 1000);
};

window.onload = function () {
    var el = document.getElementById("trigger");
    el.onmouseover = testCase;
};
    </script>
  </body>
</html>

When testing this in Firefox, Chromium and Opera, the debugging tools show that after invoking removeAllRanges in reselectFunc, both savedRange and origRange are reset. Invoking addRange with such an object causes an exception to be thrown in Firefox:

uncaught exception: [Exception...
"Could not convert JavaScript argument
arg 0 [nsISelection.addRange]"
nsresult: "0x80570009
(NS_ERROR_XPC_BAD_CONVERT_JS)"
location: "JS frame ::
file:///home/mk/tests/addrange.html ::
anonymous :: line 19" data: no]

No need to say that in all three browsers no text is selected.

Apparently this in intended behaviour. All variables assigned a (DOM)Selection object are reset after calling removeAllRanges.

回复收藏 0 原文

鸩远一方 2024-09-05 10:40:25

谢谢马塞尔。你是对的，技巧是克隆范围，然后删除特定的原始范围。这样我们就可以恢复到克隆的范围。您的帮助引导我找到了下面的代码，它将选择切换到其他地方，然后根据超时返回。

没有你我不可能做到这一点，并给予你正确的答案：D

<!DOCTYPE html>
<html>   
<head> 
    <meta charset="UTF-8">
    <title>addRange test</title>
    <style>
      #trigger { background: lightgreen }
    </style>
  </head>
  <body> 
    <p id="switch">Switch to this text</p>
    <p id="test">This is some (rather short) text.</p>
    <span id="trigger">Trigger testCase().</span>
    <script>
var origRange;
var s = window.getSelection();

var reselectFunc = function () {
     s.removeAllRanges();
     s.addRange(origRange);
};

var testCase = function () {
// Before modifying selection, save it
var userSelection,selectedText = '';

if(window.getSelection){
    userSelection=window.getSelection();
}
else if(document.selection){
    userSelection=document.selection.createRange();
}
selectedText=userSelection;
if(userSelection.text){
    selectedText=userSelection.text;
}
if(/msie|MSIE/.test(navigator.userAgent) === false){
    /* you shouldn't do this kind of browser sniffing,
       users of Opera and WebKit based browsers
       can easily spoof the UA string */
    selectedText=selectedText.toString();
}
origRange = userSelection;




 var range = s.getRangeAt(0);
 origRange = range.cloneRange();
 var sasDom = document.getElementById("switch");
 s.removeRange(range);
 range.selectNode(sasDom);
 s.addRange(range);

window.setTimeout(reselectFunc, 1000);
};
window.onload = function () {
    var el = document.getElementById("trigger");
    el.onmouseover = testCase;
};
    </script>
</body>
</html>

Thank you Marcel. You're right, the trick is to clone the range, then remove the specific original range. This way we can revert to the cloned range. Your help led me to the below code, which switches the selection to elsewhere, and then back according to a timeout.

I couldn't have done it without you, and grant you the correct answer for it :D

<!DOCTYPE html>
<html>   
<head> 
    <meta charset="UTF-8">
    <title>addRange test</title>
    <style>
      #trigger { background: lightgreen }
    </style>
  </head>
  <body> 
    <p id="switch">Switch to this text</p>
    <p id="test">This is some (rather short) text.</p>
    <span id="trigger">Trigger testCase().</span>
    <script>
var origRange;
var s = window.getSelection();

var reselectFunc = function () {
     s.removeAllRanges();
     s.addRange(origRange);
};

var testCase = function () {
// Before modifying selection, save it
var userSelection,selectedText = '';

if(window.getSelection){
    userSelection=window.getSelection();
}
else if(document.selection){
    userSelection=document.selection.createRange();
}
selectedText=userSelection;
if(userSelection.text){
    selectedText=userSelection.text;
}
if(/msie|MSIE/.test(navigator.userAgent) === false){
    /* you shouldn't do this kind of browser sniffing,
       users of Opera and WebKit based browsers
       can easily spoof the UA string */
    selectedText=selectedText.toString();
}
origRange = userSelection;




 var range = s.getRangeAt(0);
 origRange = range.cloneRange();
 var sasDom = document.getElementById("switch");
 s.removeRange(range);
 range.selectNode(sasDom);
 s.addRange(range);

window.setTimeout(reselectFunc, 1000);
};
window.onload = function () {
    var el = document.getElementById("trigger");
    el.onmouseover = testCase;
};
    </script>
</body>
</html>

回复收藏 0 原文

~没有更多了~