背景
有一块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>
原理
- 利用
contenteditable
属性, 让元素拥有控件自带的类似input
,textarea
输入特性, 那么使用ctrl + a
或command + a
(mac) 就会给你选中里面的文本元素. - 由于
contenteditable
会让用户的按键属性出现编辑行为, 所以使用了keydown事件检查, 只允许ctrl + a
和command + a
两种组合键通过默认行为. 其余行为均阻止浏览器默认行为.
扩展知识
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; }