我正在做一個小專案，用戶可以在其中上傳他們的 .docx 檔案，然后直接在應用程式中讀取這些檔案（以及來自其他用戶的檔案）。為此，我從 docx 中提取了文本并將其顯示在單獨的視圖和 html 頁面中的 div 中。現在，我想給我的用戶一個選項來從這個 div（并且只有這個 div）中選擇一些文本，當他們選擇它時，我想顯示一個懸停在他們可以點擊的文本上的按鈕。這個按鈕用于將選定的文本添加到他們的筆記中，類似于 MS Edge 在我們選擇一些文本時自動執行的操作（它添加了這三個點，然后打開一個選單進行復制和其余部分）。甚至更確切地說，如果您熟悉Coursera網站 - 選擇來自課程的一些文本，則為“保存注意”
Coursera“保存筆記”按鈕示例
但是，我不確定如何實作這一點。我想我會使用 window.getSelection，然后將選擇存盤在一些常量中，然后我將通過 fetch 將其發送到我的服務器以將其添加到 Notes 模型（我正在使用 Django）。但我不知道如何實作這一點，也不知道從哪里開始。如何在選擇選擇時，甚至在這樣的其他文本上懸停一個按鈕？任何形式的幫助都非常感謝！！注意：如果可能的話，我希望在 Vanilla JS 中使用這個，因為我還不熟悉 React 或其他庫/框架。
uj5u.com熱心網友回復：
JavaScript 中有一個函式可以檢索當前選定的文本：
function getSelectionText() {
if (document.getSelection().toString().length === 0) {
//do nothing
} else if (document.getSelection().toString().length > 0) {
//fire button function
}
return text;
}
我相信沒有僅在選擇文本時觸發的功能，所以該功能應該不斷運行，或者當有一個 dom “mouseup” 事件時。
uj5u.com熱心網友回復：
將您的問題分解為任務：
- 分別使用onmouseup和onmousedown 檢測文本選擇的開始和結束
EventHandler。
使用可用的事件物件
EventHandler來查找選定區域的坐標onmouseup創建Copy按鈕并根據所選區域的坐標定位它（使用CSS）坐標可以這樣找到：
const paragraph = document.querySelector('p');
function mouseDown(evt) {
console.log(`Selection started at : ${evt.clientX}, ${evt.clientY}`);
}
function mouseUp(evt) {
console.log(`Selection ended at : ${evt.clientX}, ${evt.clientY}`);
}
paragraph.onmouseup = mouseUp;
paragraph.onmousedown = mouseDown<!DOCTYPE html>
<html>
<body>
<p>
Hello world!
</p>
</body>
</html>- 正如您所提到的，window.getSelection可用于獲取所選文本。
一旦檢測到選擇并且所選文本可用，就可以將其推送到服務器。
轉載請註明出處，本文鏈接：https://www.uj5u.com/ruanti/388519.html
標籤：javascript html css 按钮
上一篇：事件切換鍵組合