有没有办法创建一个可编辑的div,让用户无法选择/高亮内容,但仍然可以输入内容?我想创建一个界面,用户被迫逐个按键删除和输入内容,而不能通过突出显示进行大量编辑。
我已经研究了CSS中各种形式的“user-select”属性,它适用于静态内容,但似乎不适用于可编辑元素/输入。
有什么建议吗?
谢谢
我已经研究了CSS中各种形式的“user-select”属性,它适用于静态内容,但似乎不适用于可编辑元素/输入。
有什么建议吗?
谢谢
我知道你想禁用批量删除,但如果其他人不想显示高亮颜色(即其他元素的 user-select: none
),你可以在CSS中添加以下内容:
::selection { background: transparent }
user-select: none
,但仍允许批量删除。但这可能会让用户认为没有选择,因此他们可能不会进行批量删除。textarea
而不是contenteditable
div
,您可以尝试以下方法:window.onload = function () {
var div = document.getElementById('div');
if (div.attachEvent) {
div.attachEvent('onselectstart', function (e) {
e.returnValue = false;
return false;
});
div.attachEvent('onpaste', function (e) {
e.returnValue = false;
return false;
});
} else {
div.addEventListener('paste', function (e) {
e.preventDefault();
});
div.addEventListener('select', function (e) {
var start = this.selectionStart,
end = this.selectionEnd;
if (this.selectionDirection === 'forward') {
this.setSelectionRange(end, end);
} else {
this.setSelectionRange(start, start);
}
});
}
};
HTML:
<form>
<textarea id="div"></textarea>
</form>
对代码的一些观察:
onselect
只对 form
中的 input
或 textarea
元素触发。这就是与你的 HTML 不同的原因。selectionDirection
,因此这些浏览器也使用 IE 的传统事件处理模型。div
。编辑
看起来我也做了你的“作业”。