作者热门文章
- Java 双重比较
- java - 比较器与 Apache BeanComparator
- Objective-C 完成 block 导致额外的方法调用?
- database - RESTful URI 是否应该公开数据库主键?
var editBtn = document.querySelector("button#edit"),
editable = editBtn.previousElementSibling,
saveBtn = editBtn.nextElementSibling;
editBtn.addEventListener('click', startEdit, false);
saveBtn.addEventListener('click', endEdit, false);
function startEdit() {
editable.setAttribute("contenteditable", true);
editable.focus();
}
function endEdit() {
editable.setAttribute("contenteditable", false);
// even tried
// editable.removeAttribute("contenteditable");
}
body {
background-color: #ccc;
}
p[contenteditable="true"] {
font-family: "Arial", "Georgia", "Calibri";
background-color: #fff;
font-size: 14px;
padding: 4px;
color: #424245;
border: 1px solid #C7C6CD;
}
<p>click edit, type some mispelled words, click save and highlighting remains</p>
<button id="edit">edit</button>
<button>save</button>
我有一个设置 contenteditable="true"
的功能应用程序在 <p></p>
上元素单击编辑按钮时,将其设置为 false
当按下 ENTER 键时。
现在按下 ENTER 键后 contenteditable="false"
在元素上设置,即使现在元素不再可编辑,所有拼写错误的单词仍会突出显示。
在这种情况下,有没有办法消除拼写错误的单词的突出显示。
我在编辑器中运行代码片段时遇到问题,所以如果有任何问题请告诉我。
最佳答案
最简单的方法可能就是用自己覆盖内容:
var html = editable.innerHTML;
editable.innerHTML = "";
editable.innerHTML = html;
不幸的是,必须先清空内容。
简单地 editable.innerHTML = editable.innerHTML;
似乎不起作用。
var editBtn = document.querySelector("button#edit"),
editable = editBtn.previousElementSibling,
saveBtn = editBtn.nextElementSibling;
editBtn.addEventListener('click', startEdit, false);
saveBtn.addEventListener('click', endEdit, false);
function startEdit() {
editable.setAttribute("contenteditable", true);
editable.focus();
}
function endEdit() {
editable.setAttribute("contenteditable", false);
var html = editable.innerHTML;
editable.innerHTML = "";
editable.innerHTML = html;
}
body {
background-color: #ccc;
}
p[contenteditable="true"] {
font-family: "Arial", "Georgia", "Calibri";
background-color: #fff;
font-size: 14px;
padding: 4px;
color: #424245;
border: 1px solid #C7C6CD;
}
<p>click edit, type some mispelled words, click save and highlighting remains</p>
<button id="edit">edit</button>
<button>save</button>
关于javascript - 当 contenteditable ="false"删除拼错单词的突出显示,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/41371406/
我是一名优秀的程序员,十分优秀!