JavaScript window.getSelection()无法弄明白

时间:2012-03-17 16:27:22

标签: javascript

我一直在搜索SO和各种网站,并且我遇到了许多可能适合我的问题的答案,但我在实施解决方案时遇到了麻烦。快速概述我正在努力实现的目标:

  1. 我已经构建了一个富文本编辑器。
  2. 我要求正确处理附加了格式的“粘贴”数据。
  3. 我通过onpaste =“return false”禁用了粘贴。
  4. 在Ctrl + V上,隐藏的textarea被赋予焦点,然后用户将文本粘贴在那里,然后获取textarea.value并将其复制到编辑器(contentEditable div)。
  5. 我可以在IE中完成此操作,但其余部分不能。
  6. 我的问题是我不明白window.getSelection()对象如何适用于符合标准的浏览器。我想要的是通过JavaScript将新粘贴的textarea.value复制到我的编辑器中,并保留焦点和光标(插入符号)位置。因此,闪烁的光标应保留在粘贴的末尾。

    我已经编写了以下代码,这些代码在IE中实现了这一目标,而不是其余代码:

    function handle_paste_keydown(key)
    {   
        if(
            (key.keyCode == 86 || key.charCode == 86) &&
            (key.keyCode == 17 || key.charCode == 17 || key.ctrlKey) // if "Ctrl+V" is pressed.
          )
        {
            var get_paste_selection_range;
    
            if(document.selection) 
            {
                get_paste_selection_range = document.selection.createRange();                   
                document.getElementById("paste_textarea").style.display = "block"; 
                document.getElementById("paste_textarea").focus();              
    
                document.getElementById("paste_textarea").onkeyup = function()  
                {
                    // insert the .value of the textarea at the cursor position in the editor.
                    get_paste_selection_range.text += document.getElementById("paste_textarea").value;              
                    document.getElementById("paste_textarea").style.display = "none";
    
                    // retain focus and cursor position                     
                    get_paste_selection_range.select();         
                }
            }
            else if(window.getSelection())      
            {
                document.getElementById("paste_textarea").style.display = "block"; 
                document.getElementById("paste_textarea").focus();
    
                document.getElementById("paste_textarea").onkeyup = function()  
                {
                    // How do I handle this?
                    document.getElementById("paste_textarea").style.display = "none";
                }
            }
        } 
    document.getElementById("paste_textarea").value = "";
    }
    

    Cany有人帮忙吗?谢谢!

    编辑:我添加了实时版本的链接,以便您可以看到正在发生的事情。请在Internet Explorer以及其他浏览器中尝试此操作,以便您可以准确了解正在发生的事情。注意:我已经在Ctrl + V上显示隐藏的文本区域,因此您可以更好地查看正在发生的事情,按住Ctrl + V将框保留在屏幕上。

    http://gameprogrammingworkshop.com/Java/Stack%20Overflow%20Error!/index.php?id=null

1 个答案:

答案 0 :(得分:0)

...
else if (window.getSelection) {
    var selection = window.getSelection(),
        get_paste_selection_range = selection.getRangeAt(0);
    var new_text = selection.toString() + document.getElementById("paste_textarea").value; 

    // retain your focus
}