【前端技巧】教你如何選中元素內的所有文本內容

gougoujiang 發布于2019-08-21 17:56 / 3452人閱讀

摘要：背景有一塊元素包含一段內容想要利用選中那塊元素下的的區間同時我又不想選中以外的內容默認情況下會將整個頁面可以選中的內容選中我想被選中實踐我想被選中我也想被選中原理利用屬性讓元素擁有控件自帶的類似輸入特性那么使用或就會給你選中里面的文本元素由

背景

有一塊div元素包含一段內容, 想要利用 CTRL+A 選中那塊div元素下的的區間. 同時我又不想選中 div以外的內容, 默認情況下會將整個html頁面可以選中的內容選中.


    我想被選中

實踐



  我想被Ctrl+A選中




  我也想被Ctrl+A選中

原理

利用 contenteditable屬性, 讓元素擁有控件自帶的類似input, textarea輸入特性, 那么使用 ctrl + a 或 command + a (mac) 就會給你選中里面的文本元素.

由于contenteditable 會讓用戶的按鍵屬性出現編輯行為, 所以使用了keydown事件檢查, 只允許 ctrl + a 和 command + a 兩種組合鍵通過默認行為. 其余行為均阻止瀏覽器默認行為.

DEMO

擴展知識 contenteditable 元素屬性

默認屬性: false
可選屬性: true | false

HTML5 引入的新屬性

onselectstart, onselect 事件

onselectstart 適合非 input, textarea 元素

onselect 適合 input, textarea及window元素

user-select 樣式屬性

默認屬性: auto;
可選屬性: none | text | all | element;

.disable-select {
    user-select: none;
    -webkit-select: none;
}

參考

user-select MDN

How does one capture a Mac"s command key via JavaScript?

onselect 與 onselectstart 的區別

GPU云服務器云服務器選中文本內容選中文本文本選中顏色選中的文本

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/90248.html

【前端技巧】教你如何選中元素內的所有文本內容

摘要：背景有一塊元素包含一段內容想要利用選中那塊元素下的的區間同時我又不想選中以外的內容默認情況下會將整個頁面可以選中的內容選中我想被選中實踐我想被選中我也想被選中原理利用屬性讓元素擁有控件自帶的類似輸入特性那么使用或就會給你選中里面的文本元素由背景有一塊div元素包含一段內容, 想要利用 CTRL+A 選中那塊div元素下的的區間. 同時我又不想選中 div以外的內容, 默認情況下會將...

galois 2019-08-02 15:59 評論0 收藏0
css相關 - 收藏集 - 掘金

摘要：在正式前端一些小細節前端掘金英文原文，翻譯未來的太讓人興奮了一方面，是全新的頁面布局方式另一方面，是酷炫的濾鏡顏色等視覺效果。老司機教你更好的進行編程個技巧前端掘金并不總是容易處理。 CSS3 實現文字流光漸變動畫 - 前端 - 掘金來自百度前端技術學院的實踐任務：有趣的鼠標懸浮模糊效果，參考：http://ife.baidu.com/course/d...，用CSS3實現了一下，順便...

molyzzx 2019-08-29 12:38 評論0 收藏0
HTML基礎總結

摘要：細化知識點總結標簽都是標題標簽，定義一段話的標題，最大，依次遞減，最小標題標簽的作用讓文本加粗顯示段落標簽標簽用來顯示一段文本圖片，它會忽略源代碼中的排版塊元素獨占一行的元素，和相鄰的元素不能共享同一行所有的塊元素都有屬性和元素都是HTML細化知識點總結 1.h1-h6標簽都是標題標簽，定義一段話的標題，h1最大，依次遞減，h6最小標題標簽的作用：讓文本加粗顯示 ? 2. 段落標簽：p...

Jacendfeng 2019-04-23 11:54 評論0 收藏0
一丟丟前端常用的小技巧

摘要：獲取節點只能運用到上返回找到的元素節點速度是最快的能運用到所有元素節點上返回一個類數組的集合同上能運用到所有元素節點上返回第一個匹配的元素參數是標準的選擇器能運用到所有元素節點上返回一個類數組的集合參數是標準的選擇器操作獲取或設置元素的返回獲取DOM節點: document.getElementById(): 只能運用到document上, 返回找到的元素節點, 速度是最快的; d...

missonce 2019-08-21 13:32 評論0 收藏0