Javascript 突出显示/选择文字中的单词时执行操作

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

下图显示了我的目标：

用户在其中选择word Works并显示工具提示。

jQuery事件处理程序应该就是您要查找的。文档页面上有一个示例，您应该能够重新调整其用途

---

然而，定位…工具提示元素可能很棘手。在您使用select事件功能后，可能值得再问一个问题。

您可以将事件绑定到正文的

mouseup

处理程序，并检查是否选择了任何文本

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

下面是一个示例，该示例将选定文本包装在一个范围内，该范围将文本加粗并放大：

---

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

试试这个，需要JQuery

• 剧本

  $(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>
  

---

您可以使用.hover（）event@DinoMyte如果用户只需将鼠标移到整个文本上，我认为鼠标悬停的效果会更好。我想暂时将所选单词包装在一个包含此工具提示的范围内，然后再做一些定位技巧。@Ilja可能有用，我只是想不出一个快速的方法来找出所选文本在屏幕上的位置。如果您可以将其包装在一个跨度中，则可能允许您以跨度为目标并获取其位置。o输入字段可能不会将范围视为“html”。.select（）仅限于textbox和textarea。@DinMyte输入，如接收输入。与产量形成对比。

<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>

.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;
 }