如何使用選擇API為選定文本創建動作

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

如果您曾經使用過在線編輯器，則可能已經熟悉選擇菜單。當您選擇文本時，選擇選項可能會浮在其上方。實際上，我正在將此草稿編寫在一個完全做到這一點的編輯中。

讓我們看看如何使用JavaScript的選擇API創建這樣的選擇菜單。 API使我們可以訪問網頁上所選區域的空間和內容。這樣，我們可以將選擇菜單正好放在所選文本上方，並訪問所選文本本身。

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

 <article>
  <h1 id="選擇下面的文本">選擇下面的文本</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中文網其他相關文章！