当用户在contentEditable div中选择一些文本/元素时,我想触发一个事件。因此,我想停用RTF编辑器中的某些按钮。
有些事件可以根据内容的更改而触发。当用户选择某些内容时,我只想要一个事件。
答案 0 :(得分:1)
您可以将事件侦听器添加到mouseup
事件的元素中,然后从window
获取选择:
<div contenteditable="true" id="editableDiv">Some content</div>
还有js:
document.getElementById("editableDiv").addEventListener("mouseup", function() {
var s = window.getSelection();
if(s == "something"){
//do your thing
}
}, false);
答案 1 :(得分:1)
一个相对简化的版本可能看起来像这样,根据您的需要,您可能需要处理不支持window.getSelection()
的旧IE等浏览器!
const handleSelection = function() {
const btn = document.querySelector('#btn');
let selection = window.getSelection().anchorNode.textContent
.substring(
window.getSelection().extentOffset,
window.getSelection().anchorOffset
);
if (selection.length !== 0) {
btn.setAttribute('disabled', true);
} else {
btn.removeAttribute('disabled');
}
};
['mouseup', 'keyup', 'selectionchange'].forEach((e) => {
document.querySelector('#editable').addEventListener(e, handleSelection);
});
#btn[disabled] {
cursor: default;
opacity: 0.3;
}
<button type="button" id="btn">Button (disabled when something is selected)</button>
<div id="editable" contenteditable>
<p>I'm some content that is editable!</p>
</div>