我已经在我的键盘事件处理程序中编写了一些代码来插入一个<br>响应 Enter 键的按下：
event.preventDefault();
document.execCommand('InsertHTML', true, '<br>');
这仅在光标位于两个字母之间时才有效，如果最后我需要两个<br>-Elements。我可以检测我是否在一行的末尾吗？或者输入问题的其他一些工作想法？
我还尝试捕获正常的键事件（没有按下 ctrl 键）并使用 JS 创建一个键盘事件，其中 Enter 键与 ctrl 一起按下。但这行不通……
它只需要在 Webkit/Safari 中工作……
为了解决您的问题，请始终保留br元素作为 contenteditable div 的最后一个元素。这将确保在注入 br 元素与浏览器默认注入 div 元素时的可预测行为。您可以检查keyup 和 mouseup 上的lastChild以确保它是 br 元素。假设你有一个文件，如：
<div id="editable" contenteditable="true"></div>
您可以使用以下 JavaScript (w/ jQuery 1.4+) 将 br 元素保留为最后一个元素并注入 br 元素而不是 div div：
$(function(){
$("#editable")
// make sure br is always the lastChild of contenteditable
.live("keyup mouseup", function(){
if (!this.lastChild || this.lastChild.nodeName.toLowerCase() != "br") {
this.appendChild(document.createChild("br"));
}
})
// use br instead of div div
.live("keypress", function(e){
if (e.which == 13) {
if (window.getSelection) {
var selection = window.getSelection(),
range = selection.getRangeAt(0),
br = document.createElement("br");
range.deleteContents();
range.insertNode(br);
range.setStartAfter(br);
range.setEndAfter(br);
range.collapse(false);
selection.removeAllRanges();
selection.addRange(range);
return false;
}
}
});
});
在带有 Google Chrome 7、Mozilla Firefox 3.6、Apple Safari 5 的 Apple OS X 上测试）。尝试使用ierange使其在 Windows Internet Explorer 中工作。
我会将一个函数绑定到 keyup 事件以删除并更改为
使用正则表达式。所以即使它创建了奇怪的标记，它也会被修复。
使用jQuery：
$('.myEditable').keyup(function(){
var sanitazed = $(this).text().replace(/<div[^<]*?>/g, '').replace(/<\/div[^<]*?>/g, '<br>');
$(this).text(sanitazed);
});