成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

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

gougoujiang / 3479人閱讀

摘要：背景有一塊元素包含一段內(nèi)容想要利用選中那塊元素下的的區(qū)間同時我又不想選中以外的內(nèi)容默認(rèn)情況下會將整個頁面可以選中的內(nèi)容選中我想被選中實(shí)踐我想被選中我也想被選中原理利用屬性讓元素?fù)碛锌丶詭У念愃戚斎胩匦阅敲词褂没蚓蜁o你選中里面的文本元素由

背景

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


    
我想被選中
實(shí)踐 



  我想被Ctrl+A選中






  我也想被Ctrl+A選中

原理

利用 contenteditable屬性, 讓元素?fù)碛锌丶詭У念愃?b>input, textarea輸入特性, 那么使用 ctrl + a 或 command + a (mac) 就會給你選中里面的文本元素.

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

DEMO

擴(kuò)展知識 contenteditable 元素屬性

默認(rèn)屬性: false
可選屬性: true | false

HTML5 引入的新屬性

onselectstart, onselect 事件

onselectstart 適合 非 input, textarea 元素

onselect 適合 input, textarea及window元素

user-select 樣式屬性

默認(rèn)屬性: 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 的區(qū)別

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/90248.html

相關(guān)文章

  • 【前端技巧】教你如何選中元素內(nèi)的所有文本內(nèi)容

    摘要：背景有一塊元素包含一段內(nèi)容想要利用選中那塊元素下的的區(qū)間同時我又不想選中以外的內(nèi)容默認(rèn)情況下會將整個頁面可以選中的內(nèi)容選中我想被選中實(shí)踐我想被選中我也想被選中原理利用屬性讓元素?fù)碛锌丶詭У念愃戚斎胩匦阅敲词褂没蚓蜁o你選中里面的文本元素由 背景 有一塊div元素包含一段內(nèi)容, 想要利用 CTRL+A 選中那塊div元素下的的區(qū)間. 同時我又不想選中 div以外的內(nèi)容, 默認(rèn)情況下會將...

    galois 評論0 收藏0

  • css相關(guān) - 收藏集 - 掘金

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

    molyzzx 評論0 收藏0

  • HTML基礎(chǔ)總結(jié)

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

    Jacendfeng 評論0 收藏0

  • 一丟丟前端常用的小技巧

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

    missonce 評論0 收藏0

發(fā)表評論

0條評論

最新活動
閱讀需要支付1元查看
<