【问题标题】:Range.select() equivalent method for non IE browsers非 IE 浏览器的 Range.select() 等效方法
【发布时间】:2013-01-19 05:21:01
【问题描述】:

如果我有

var range = document.body.createTextRange(); 

我在 Internet Explorer 中调用 range.select();,与其他浏览器(Firefox、Chrome、Opera)中的范围选择方法等效的是什么?在创建范围对象并将其添加到当前选择后,我正在寻找使我的插入符号在 contenteditable div 中可见的东西。

谢谢!

后期编辑: 我需要这个,因为我试图让我的应用程序在所有浏览器上运行,并且我需要将插入符号放置在 contenteditable div 中,就在用户从弹出窗口中选择的文本之后。到目前为止,我的应用程序在 IE 上运行,但我还需要让它在 Opera、Firefox 和 Chrome 上运行。我在 IE 上放置插入符号的 Javascript 代码如下所示:

 function setCaretPos()
 {
    if (document.selection) 
    {
       /* IE */
       var range = document.body.createTextRange();
       range.moveToElementText(editableDiv);
       var insertedSpan = document.getElementById('span' + count);
       var preCaretRange = document.body.createTextRange();
       preCaretRange.moveToElementText(insertedSpan);
       preCaretRange.moveEnd("character", 2);
       range.setEndPoint("EndToEnd", preCaretRange);
       range.collapse(false);
       range.select();
    }
    else
    {
     if (window.getSelection) {
     /* Firefox, Opera, Chrome */
     var sel = window.getSelection();
     if(sel.rangeCount)
     {
        var range = sel.getRangeAt(0);
        var insertedSpan = document.getElementById('span' + count);
        range.selectNodeContents(insertedSpan);
        range.collapse(false);
        sel.removeAllRanges();
        sel.addRange(range);
       }
     }
 }

使用上面的代码,跨度内的文本被选中,但我的问题是插入跨度后插入符号没有显示,它只是消失了。

非常感谢任何建议。谢谢!

【问题讨论】:

  • 您可以查看rangy。这可能是您正在寻找的。​​span>
  • 您可以查看this 问题,我认为它可以满足您的需求

标签: javascript range contenteditable


【解决方案1】:

其他浏览器中的等价物是通过Selection对象:

var range = document.createRange();
var selection = window.getSelection();
selection.removeAllRanges();
selection.addRange(range);

【讨论】:

  • 嗨,蒂姆!感谢您的回答。事实上,让我告诉你为什么我需要这个:我需要在用户选择的一些文本之后放置插入符号。我试过 var range = window.getSelection().getRangeAt(0); var insertSpan = document.getElementById('span' + count); range.selectNodeContents(insertedSpan);var selection = window.getSelection(); selection.removeAllRanges();选择.addRange(范围);但我的插入符号根本没有显示插入的跨度。如何使用选择对象使其可见?
  • @Crista23:您可能需要调用 contenteditable 元素的 focus() 方法。
  • 谢谢,蒂姆!这正是我想要的!
  • 还有一个问题:有没有办法可以将插入符号 2 个字符从插入的跨度中移开? (我的意思是相当于其他浏览器中的 preCaretRange.moveEnd("character", 2); 行)?我需要它,以便用户在选择后自动添加一个空白空间,以便他可以继续写作。谢谢。
猜你喜欢
  • 2011-03-21
  • 1970-01-01
  • 1970-01-01
  • 2018-07-20
  • 2011-07-14
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
相关资源
最近更新 更多