当文本中的单词被突出显示/选择时执行操作答案

【问题标题】：Perform action when word from text is highlighted/selected当文本中的单词被突出显示/选择时执行操作
【发布时间】：2016-01-15 17:39:54
【问题描述】：

我需要为选定/突出显示的文本显示工具提示，以允许用户将其设为斜体/粗体/正常。我可能会将该单词与相关类的样式包装在一个跨度中，但是我需要弄清楚如何显示此类工具提示并处理选定的单词，以便我可以对其执行操作。我试图找到一个这样做的图书馆，但到目前为止还没有运气。

下面的图片展示了我所追求的：

用户选择单词 Works 并出现工具提示。

【问题讨论】：

你可以使用 .hover() 事件
@DinoMyte hover 我认为如果用户只是将鼠标悬停在整个文本上。

标签： javascript jquery

【解决方案1】：

jQuery .select() 事件处理程序应该是您正在寻找的。文档页面上有一个示例，您应该可以重新利用它。

然而，定位 ...tooltip 元素可能会很棘手。获得选择事件功能后，可能值得再问第二个问题。

【讨论】：

我正在考虑将选定的单词临时包装在一个包含此工具提示或其他内容的跨度中，而不是做一些定位技巧。
@Ilja 可能有用，我只是想不出一种快速的方法来确定所选文本在屏幕上的位置。如果您可以将它包装在一个跨度中，那可能允许您定位该跨度并获得 it's 位置。 OTOH跨度可能不会被输入字段视为“html”。
.select() 仅限于 textbox 和 textarea。
@DinoMyte Input，用于接收输入。与输出形成对比。

【解决方案2】：

您可以将事件绑定到正文的mouseup 处理程序并检查是否有任何文本被选中。

从这里您可以检查选择是否有任何文本，如果有，则根据需要显示工具提示。

下面是一个示例，它将所选文本包裹在一个粗体和放大文本的跨度中：http://jsbin.com/yezake/edit?js,output

const mouseUpHandler = function () {
  const sel = document.getSelection();

  if(!sel.toString()) {
    $('.foo').contents().unwrap();
    sel.removeAllRanges();
    return;
  }

  const newNode = document.createElement('span');
  newNode.className = 'foo';


  const range = sel.getRangeAt(0);
  range.surroundContents(newNode);

  sel.removeAllRanges();
  sel.addRange(range);

};

$('body').on('mouseup', mouseUpHandler);

再花一点时间，您可以在其中添加工具提示标记，并在进行选择时显示。这可能是一个非常幼稚的实现，但如果您想自己动手，它可以帮助您入门。

【讨论】：

【解决方案3】：

试试这个，需要JQuery

https://jsfiddle.net/Ripper1992/L0suavjd/

脚本

$(document).ready(function(){
    $('span').mouseenter(function(){
        var span = $(this);
        $('.tooltip').fadeIn();
    })
    $('.tooltip').mouseleave(function(){
        var span = $(this);
        $('.tooltip').fadeOut();
    })
    $('a').click(function(){
        var classe = $(this).attr('class');
        var spanClass = $('span').removeClass();
        $('span').addClass(classe);
  });
})

HTML

<div>The Piano <span class=''>Works</span> is like a live</div>

<div class="tooltip">
    <a href="#" class="bold">Bold</a>
    <a href="#" class="italic">Italic</a>
    <a href="#" class="normal">Normal</a>
</div>

CSS

.tooltip{
    display: none;
    border: solid 1px #CCC;
    width: 130px;
    text-align: center;
    position: absolute;
}
.bold{
    font-weight: bold;
    font-style: normal;
 }
.italic{
    font-weight: normal;
    font-style: italic;
 }
 .normal{
    font-weight: normal;
    font-style: normal;
 }

【讨论】：