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

背景

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

<div>
    <p>我想被選中</p>
</div>

實踐

<div contenteditable="true" id="app">
<p>
  我想被Ctrl+A選中
</p>
<br />
<p>
  我也想被Ctrl+A選中
</p>
</div>

<script>
var app = document.getElementById('app');
app && app.addEventListener('keydown', function (event) {
    if ((event.ctrlKey || event.metaKey) && event.keyCode == 65) {
      console.log('allow')
  } else {
      event.preventDefault
    ? event.preventDefault()
    : event.returnValue = false;
  }
});
</script>

原理

1. 利用 contenteditable屬性, 讓元素擁有控件自帶的相似input, textarea輸入特性, 那麼使用 ctrl + a 或 command + a (mac) 就會給你選中裏面的文本元素.
2. 因爲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 的區別