單擊，拖動，發(fā)布：您剛剛在網(wǎng)頁上選擇了一些文本 - 可能是將其復(fù)制并粘貼到某個地方或共享。如果選擇文本揭示了一些使這些任務(wù)更容易的選項(xiàng)，那會不會很酷？這就是選擇菜單的作用。

如果您曾經(jīng)使用過在線編輯器，則可能已經(jīng)熟悉選擇菜單。當(dāng)您選擇文本時，選擇選項(xiàng)可能會浮在其上方。實(shí)際上，我正在將此草稿編寫在一個完全做到這一點(diǎn)的編輯中。

讓我們看看如何使用JavaScript的選擇API創(chuàng)建這樣的選擇菜單。 API使我們可以訪問網(wǎng)頁上所選區(qū)域的空間和內(nèi)容。這樣，我們可以將選擇菜單正好放在所選文本上方，并訪問所選文本本身。

這是一個帶有一些示例文本的HTML片段：

 <article>
  <h1>選擇下面的文本</h1> 
  <p>級聯(lián)樣式表（CSS）是一種樣式的語言，用于描述用標(biāo)記語言（例如HTML）編寫的文檔的介紹。 CSS與HTML和JavaScript一起是萬維網(wǎng)的基石技術(shù)。 CSS旨在使演示文稿和內(nèi)容的分離，包括布局，顏色和字體。這種分離可以提高內(nèi)容可訪問性，在演示特征的規(guī)范中提供更多的靈活性和控制。 </p>

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

最后有一個標(biāo)簽。內(nèi)部的是我們的選擇菜單控件。 標(biāo)簽中的任何內(nèi)容都不會在頁面上渲染，直到隨后使用JavaScript添加到頁面。當(dāng)用戶選擇文本時，我們將“選擇”菜單控件添加到頁面。當(dāng)用戶選擇該文本時，我們的選擇菜單將提示用戶發(fā)推文。

這是CSS樣式的CSS：

 ?？刂?{
    背景圖像：url（“數(shù)據(jù)：圖像/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>“）;
  光標(biāo)：指針；
  位置：絕對；
  寬度：40px;
  身高：40px;
}
#control :: {
  背景色：黑色；
  顏色：白色；
  內(nèi)容：“推文！”；
  顯示：塊;
  字體重量：大膽；
  左鍵：37px;
  保證金頂：6px;
  填充：2px;
  寬度：Max-Content;
  身高：20px;
}

請查看本文，了解我如何使用表情符號（？）作為背景圖像。

到目前為止，示例文本已經(jīng)準(zhǔn)備就緒，并且選擇菜單控件已被設(shè)計。讓我們繼續(xù)使用JavaScript。進(jìn)行選擇后，我們將在頁面上獲得所選區(qū)域的大小和位置。然后，我們使用這些測量值來分配選擇菜單控件的位置，這是在所選區(qū)域的頂部中間。

 var control = document.importnode（document.queryselector（'template'）。內(nèi)容，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（控制）;
  }
}

在此代碼中，我們首先獲得

接下來，我們?yōu)閹в惺纠谋镜脑氐腛nPointerup事件編寫處理程序功能。在功能中，我們使用document.getSelection（）獲得選擇和選定的字符串。如果所選的字符串不是空的，則我們通過getBoundingClientRect（）獲得所選區(qū)域的大小和位置，然后將其放置在RECT變量中。

使用RECT，我們計算并分配控件的頂部和左側(cè)位置。這樣，選擇菜單控件將放置在選定區(qū)域的上方，并水平居中。我們還將所選字符串分配給控件的用戶定義屬性。稍后，這將用于共享文本。

最后，我們使用附錄（）將控件添加到網(wǎng)頁中。此時，如果我們在頁面上選擇一些示例文本，則選擇菜單控件將出現(xiàn)在屏幕上。

現(xiàn)在，我們可以編碼單擊選擇菜單控件時會發(fā)生什么。換句話說，我們將做到這一點(diǎn)，以便在單擊提示時發(fā)推文。

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

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

單擊控件時，將打開一個Twitter的“新推文”頁面，并配有準(zhǔn)備就緒的選定文本。

推文提示后，不再需要選擇菜單控件，并且被刪除，以及頁面上的任何選擇。在這一點(diǎn)上，Potternown事件進(jìn)一步沿DOM樹的層流層面的方式也被停止。

我們還需要一個事件處理程序，以進(jìn)行頁面的OnPoTredown事件：

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

現(xiàn)在，在單擊頁面上的任何位置，但選擇菜單控件時，將刪除頁面上的控件和任何選擇。

演示

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

這是一個在選擇菜單中顯示多個控件的示例：

關(guān)于該

我們使用它并不是完全必要的。取而代之的是，您也可以嘗試簡單地隱藏和顯示控件的其他方式，例如隱藏的HTML屬性或CSS顯示。您還可以在JavaScript本身中構(gòu)建選擇菜單控件。編碼選擇將取決于您執(zhí)行它們的效率，以及它們的后備（如果需要）以及它們?nèi)绾芜m合您的應(yīng)用程序。

一些UI/UX建議

雖然這是一個很好的效果，但使用它時有幾件事需要考慮以確保良好的用戶體驗(yàn)。例如，避免將自己的文本注入文本選擇中 - 您知道，就像在自動生成的推文中附加鏈接回到您的網(wǎng)站一樣。這是侵入性和煩人的。如果有任何理由這樣做，例如添加源引用，請在發(fā)布之前先查看最終文本的預(yù)覽。否則，用戶可能會因加法而感到困惑或感到驚訝。

還有一件事：最好是菜單控件不在。我們不希望它覆蓋過多的周圍內(nèi)容。這種事情加起來是CSS的“數(shù)據(jù)丟失”，我們希望避免這種情況。

底線：了解為什么您的用戶需要在您的網(wǎng)站上選擇文本并以避免他們嘗試做的方式添加控件。

以上是如何使用選擇API為選定文本創(chuàng)建動作的詳細(xì)內(nèi)容。更多信息請關(guān)注PHP中文網(wǎng)其他相關(guān)文章！