我試圖通過首先從鍵盤快捷鍵禁用它的文本樣式行為來圍繞 contenteditable 構建，例如ctrl bor ctrl i。
event.preventDefault()當檢測到這些快捷方式keyup和事件時，我正在使用keydown- 但有時很少，我注意到 contenteditable 仍然忽略event.preventDefault()并且鍵盤快捷方式受到尊重。
keyup除了取消和之外，有什么方法可以完全禁用這些鍵盤快捷鍵keydown嗎？
我的快捷方式檢測器出現故障，它在某些情況下讓事件通過。似乎取消事件keydown實際上也取消了快捷方式。
我為任何想嘗試的人創建了一個 jsfiddle：https ://jsfiddle.net/mohj19bs/28/
明天我將關閉此執行緒，以防其他人可能會分享一些有趣的東西，因為contenteditable從未停止讓我感到驚訝。
uj5u.com熱心網友回復：
不知道你正在處理什么問題，但這很好用......
document.getElementById("test").addEventListener("keydown", e => {
if(!e.ctrlKey) return;
if(e.keyCode === 66 || e.keyCode === 73) {
e.preventDefault();
}
});<div id="test" contenteditable>This div is editable</div>還有一個供您享受的單線：
document.getElementById("test").onkeydown = e => !(e.ctrlKey && (e.keyCode === 66 || e.keyCode === 73));<div id="test" contenteditable>This div is editable</div>uj5u.com熱心網友回復：
這是另一種可能對您有用的策略。不要試圖阻止b和i元素被插入，只需立即洗掉它們 onkeyup或 on paste。
經辦案件有：
- [CTRL] [b] 和 [CTRL] [i]
- 粘貼包含行內樣式屬性的 HTML
它以遞回方式作業以處理嵌套元素。
let forbiddenTags = ["B", "I", "STRONG"]
let clean = function(e){
// Loop through all child nodes
e.target.childNodes.forEach(function(item){
// recursion if there are childnodes
if(item.childNodes){
clean({target:item})
}
// Remove forbidden tags
if(item.tagName && forbiddenTags.indexOf(item.tagName) > -1){
item.insertAdjacentHTML("afterEnd", item.innerHTML)
item.remove()
return
}
// Reset inline style
if(item.style){
item.style.fontWeight = "normal"
item.style.fontStyle = "normal"
}
})
}
document.querySelector("#test").addEventListener("keyup", clean)
document.querySelector("#test").addEventListener("paste", clean)div{
border: 1px solid grey;
padding: 0.5em;
}
table{
border-collapse: collapse;
}
td{
border: 1px solid grey;
}<div id="test" contentEditable=true>Enter text here</div>
<br>
Paste me in!:
<div id="pasteit">
<b>bold</b> <i>italic</i> <strong>strong</strong> <span style="font-weight:bold;">inline</span>
<table>
<tr>
<td style="font-style:italic;">Italic</td>
<td style="font-weight:bold;">Bold</td>
</tr>
</table>
</div>轉載請註明出處，本文鏈接：https://www.uj5u.com/ruanti/452213.html
標籤：javascript html dom