背景
有一块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;
}