javascript - 获取鼠标指针上的文本框字

Question

我有文本框/文本区域，我只想用鼠标指向一个词。然后在另一个文本框中显示该词。例如:当我将鼠标指针悬停在一个词上时，它应该显示在另一个文本框/文本区域中(仅那个词)。

我看到很多帖子都有tag，但是在textbox/textarea里面不能加我还需要用鼠标点击创建函数，

我需要鼠标悬停功能和鼠标点击功能两种方式来获取文字。

See the 

Demo and update this

Answer 1

我不确定这对于纯文本区域是否可行，但您可以使用启用了“contenteditable”的 div 来实现。

效果很好， see my jsfiddle demo (注意:在可编辑区域外单击以在任何编辑后重新启用突出显示)。

HTML:

<div contenteditable="true" id="editor">
    <div>
        Content here.
    </div>
    <div>
        More content here.
    </div>
</div>
Current word: <span id="word"></span>

Javascript:

var wrapwords = function() {
    $('#editor > div').each(function() {
        $(this).html($(this).text().replace(/\b(\w+)\b/g, "<span>$1</span>"));
    });

    $('#editor span').hover(
        function() { $('#word').text($(this).css('background-color','#ffff66').text()); },
        function() { $('#word').text(''); $(this).css('background-color',''); }
    );
};

$('#editor').on('focus', function() {
    $('#editor span').contents().unwrap();
});

$('#editor').on('blur', function() {
    wrapwords();
});

wrapwords();