如何使用选择API为选定文本创建动作-css教程-PHP中文网

如何使用选择API为选定文本创建动作

单击，拖动，发布：您刚刚在网页上选择了一些文本 - 可能是将其复制并粘贴到某个地方或共享。如果选择文本揭示了一些使这些任务更容易的选项，那会不会很酷？这就是选择菜单的作用。

如果您曾经使用过在线编辑器，则可能已经熟悉选择菜单。当您选择文本时，选择选项可能会浮在其上方。实际上，我正在将此草稿编写在一个完全做到这一点的编辑中。

让我们看看如何使用JavaScript的选择API创建这样的选择菜单。 API使我们可以访问网页上所选区域的空间和内容。这样，我们可以将选择菜单正好放在所选文本上方，并访问所选文本本身。

这是一个带有一些示例文本的HTML片段：

 <article>
  <h1>选择下面的文本</h1> 
  <p>级联样式表（CSS）是一种样式的语言，用于描述用标记语言（例如HTML）编写的文档的介绍。 CSS与HTML和JavaScript一起是万维网的基石技术。 CSS旨在使演示文稿和内容的分离，包括布局，颜色和字体。这种分离可以提高内容可访问性，在演示特征的规范中提供更多的灵活性和控制。 </p>

<template> <span> </span> </template></article>

登录后复制

最后有一个标签。内部的是我们的选择菜单控件。标签中的任何内容都不会在页面上渲染，直到随后使用JavaScript添加到页面。当用户选择文本时，我们将“选择”菜单控件添加到页面。当用户选择该文本时，我们的选择菜单将提示用户发推文。

这是CSS样式的CSS：

 ＃控制 {
    背景图像：url（“数据：图像/svg xml，<svg xmlns="”" http: width="'40px'height">'40px'> <forefer object> <forefer xmlns="'http://www.w3.org/1999/xhtml'" style="'width:40px;height:40px;line-height:40px;text-align:center;color:transparent;text-shadow:" yellow black font-size>？  </forefer></forefer></svg>“）;
  光标：指针；
  位置：绝对；
  宽度：40px;
  身高：40px;
}
#control :: {
  背景色：黑色；
  颜色：白色；
  内容：“推文！”；
  显示：块;
  字体重量：大胆；
  左键：37px;
  保证金顶：6px;
  填充：2px;
  宽度：Max-Content;
  身高：20px;
}

登录后复制

请查看本文，了解我如何使用表情符号（？）作为背景图像。

到目前为止，示例文本已经准备就绪，并且选择菜单控件已被设计。让我们继续使用JavaScript。进行选择后，我们将在页面上获得所选区域的大小和位置。然后，我们使用这些测量值来分配选择菜单控件的位置，这是在所选区域的顶部中间。

 var control = document.importnode（document.queryselector（'template'）。内容，true）.childnodes [0];
document.queryselector（'p'）。onpointerup =（）=> {
  让Selection = document.getSelection（），text = selection.tostring（）;
  if（text！==“”）{
    令rect = selection.getRangeat（0）.getBoundingClientRect（）;
    control.style.top =`calc（$ {rect.top} px -48px）`;
    control.style.left =`calc（$ {rect.left} px calc（$ {rect.width} px / 2）-40px）`;
    控制['text'] = text; 
    document.body.body.appendchild（控制）;
  }
}

登录后复制

在此代码中，我们首先获得

接下来，我们为带有示例文本的元素的OnPointerup事件编写处理程序功能。在功能中，我们使用document.getSelection（）获得选择和选定的字符串。如果所选的字符串不是空的，则我们通过getBoundingClientRect（）获得所选区域的大小和位置，然后将其放置在RECT变量中。

使用RECT，我们计算并分配控件的顶部和左侧位置。这样，选择菜单控件将放置在选定区域的上方，并水平居中。我们还将所选字符串分配给控件的用户定义属性。稍后，这将用于共享文本。

最后，我们使用附录（）将控件添加到网页中。此时，如果我们在页面上选择一些示例文本，则选择菜单控件将出现在屏幕上。

现在，我们可以编码单击选择菜单控件时会发生什么。换句话说，我们将做到这一点，以便在单击提示时发推文。

 control.AddeventListener（'Pointerdown'，OnControldown，true）;

函数oncontroldown（event）{
  window.open（`https://twitter.com/intent/tweet？text = $ {this.text}`）
  this.remove（）;
  document.getSelection（）。removeAllranges（）;
  event.stoppropagation（）;
}

登录后复制

单击控件时，将打开一个Twitter的“新推文”页面，并配有准备就绪的选定文本。

推文提示后，不再需要选择菜单控件，并且被删除，以及页面上的任何选择。在这一点上，Potternown事件进一步沿DOM树的层流层面的方式也被停止。

我们还需要一个事件处理程序，以进行页面的OnPoTredown事件：

 document.onpointerdown =（）=> {    
  令控制= document.queryselector（'＃Control'）;
  if（control！== null）{control.remove（）; document.getSelection（）。removeAllranges（）;}
}

登录后复制

现在，在单击页面上的任何位置，但选择菜单控件时，将删除页面上的控件和任何选择。

演示

这是克里斯（Chris）制作的更漂亮的版本：

这是一个在选择菜单中显示多个控件的示例：

关于该

我们使用它并不是完全必要的。取而代之的是，您也可以尝试简单地隐藏和显示控件的其他方式，例如隐藏的HTML属性或CSS显示。您还可以在JavaScript本身中构建选择菜单控件。编码选择将取决于您执行它们的效率，以及它们的后备（如果需要）以及它们如何适合您的应用程序。

一些UI/UX建议

虽然这是一个很好的效果，但使用它时有几件事需要考虑以确保良好的用户体验。例如，避免将自己的文本注入文本选择中 - 您知道，就像在自动生成的推文中附加链接回到您的网站一样。这是侵入性和烦人的。如果有任何理由这样做，例如添加源引用，请在发布之前先查看最终文本的预览。否则，用户可能会因加法而感到困惑或感到惊讶。

还有一件事：最好是菜单控件不在。我们不希望它覆盖过多的周围内容。这种事情加起来是CSS的“数据丢失”，我们希望避免这种情况。

底线：了解为什么您的用户需要在您的网站上选择文本并以避免他们尝试做的方式添加控件。

以上是如何使用选择API为选定文本创建动作的详细内容。更多信息请关注PHP中文网其他相关文章！