设置（或读取）HTML TextArea中光标/插入符的值 [英] Setting (or Reading) value of Cursor/Caret in HTML TextArea

问题描述

我试图（和失败）将拖放机制实现为HTML文本区域。

使用jQuery或Scriptaculous（我们同时使用），Drag& Drop机制相对容易，所以我愿意接受使用这两者之一的答案。 >

问题是，我似乎无法找到读取或设置插入点的方法。

我最终希望能够做的是确定放置位置，做一些数学计算来确定textarea的确切位置，然后设置插入符号位置（或插入点），以及放置（插入）掉落的文本。

我可以处理计算，我只需要知道如何阅读和设置脱字符位置（最终将成为我删除文本的插入点）。这甚至可能吗？

谢谢 -

解决方案

通过拼凑一些来自这里的片段和想法。下面是我如何解决这个问题：

1. 我将每段要拖动的文本放在跨度使用jquery（在文档就绪函数中）自动选择/取消选择类的 draggable_text '

每当mouseover / mouseout被触发时，span中的文本。 / strong>

  $（document）.ready（
 
 $（'。draggable_text'）。 mouseover（
 function（）{
 selectNode（this）; 
} 
）; 
 
 $（'。draggable_text'）。 $ b function（）{
 clearSelection（this）; 
} 
）; 
 
）; 
 
 function selectNode（node）{
 var selection，range，doc，win; 
 if（（doc = node.ownerDocument）
&&（win = doc.defaultView）
&& typeof win.getSelection！='undefined'
& amp ;& typeof doc.createRange！='undefined'
&&（selection = window.getSelection（））
&& typeof selection.removeAllRanges！='undefined'
 ）{
 range = doc.createRange（）; 
 range.selectNode（node）; 
 selection.removeAllRanges（）; 
 selection.addRange（range）; 
&&&（range = document.body.createTextRange（）））
} else if（document.body 
&& typeof document.body.createTextRange！='undefined' {
 range.moveToElementText（node）; 
 range.select（）; 
 
 
 
函数clearSelection（）{
 if（document.selection）{
 document.selection.empty（）; 
} else if（window.getSelection）{
 window.getSelection（）。removeAllRanges（）; 
} 
} 
  

有趣的是，使用这种方法，没有特殊的拖动&需要实现放置机制 - 当您将选定的文本拖到文本区域时，浏览器自动假设您想将其复制到文本区域。完善！



我在FF3，IE6和IE7（WinXP和Vista）上测试了这个功能。每个拖放图形都略有不同，但都起作用。


I am trying (and failing) to implement a drag&drop mechanism into an HTML textarea.

Drag&Drop mechanism is relatively easy with jQuery or Scriptaculous (we use both), so I am willing to accept an answer that uses either of these two.

Problem is, I cannot seem to find a way to read or set the insertion point.

What I ultimately want to be able to do is determine the drop location, do some kind of mathematical calculation to determine where on the textarea that is exactly, then set the caret position (or insertion point), and place (insert) dropped text there.

I can handle the calculations, I just need to know how the heck to read and set the caret position (which will ultimately be my insertion point for the dropped text). Is this even possible?

Thanks -

解决方案

I worked this out by piecing together a few snippets and ideas from around here. Here is how I solved this one:

1. I placed each section of text I wanted to make draggable into a span with a class of 'draggable_text'

2. used jquery (in document ready function) to auto-select/deselect the text inside the span each time mouseover/mouseout fired.

.. here is the code:

$(document).ready (

    $('.draggable_text').mouseover(
        function () {
          selectNode(this);
        }
    );

    $('.draggable_text').mouseout(
        function () {
          clearSelection(this);
        }
    );

);

function selectNode (node) {
    var selection, range, doc, win;
    if ( (doc = node.ownerDocument) 
          && (win = doc.defaultView) 
          && typeof win.getSelection != 'undefined' 
          && typeof doc.createRange != 'undefined' 
          && (selection = window.getSelection()) 
          && typeof selection.removeAllRanges != 'undefined'
        ) {
        range = doc.createRange();
        range.selectNode(node);
        selection.removeAllRanges();
        selection.addRange(range);
    } else if ( document.body 
                && typeof document.body.createTextRange != 'undefined' 
                && (range = document.body.createTextRange()) ) {
        range.moveToElementText(node);
        range.select();
    }
}

function clearSelection () {
    if (document.selection) {
        document.selection.empty();
    } else if (window.getSelection) {
        window.getSelection().removeAllRanges();
    }
}

Interestingly, using this methodology, no special drag & drop mechanisms need to be implemented - it seems that the browser automatically assumes when you drag selected text into a text area, that you want to copy it there. Perfect!

I tested this on FF3, IE6, and IE7 (WinXP and Vista). The drag/drop graphic was slightly different on each, but all worked.

这篇关于设置（或读取）HTML TextArea中光标/插入符的值的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！