Javascript 做一个<；br>；而不是<；部门></部门>；在可编辑的内容上按Enter键

我在键盘事件处理程序中编写了一些代码，以插入一个

，以响应按Enter键：

event.preventDefault();
document.execCommand('InsertHTML', true, '<br>');

event.preventDefault（）；
document.execCommand（'InsertHTML'，true，
'）；

这仅在光标位于两个字母之间时有效，如果光标位于末尾，则我需要两个

-元素。我能检测到我是否在排队吗？或者其他一些解决输入问题的方法

我还尝试捕捉正常的按键事件（不按ctrl键），并使用JS创建一个键盘事件，其中Enter键与ctrl键一起按下。但这不管用

---

它只需在Webkit/Safari中工作…

为了解决您的问题，请始终将br元素作为contenteditable div的最后一个元素。这将确保在注入br元素时可以预测行为，而不是浏览器默认的注入div元素。您可以在keyup和mouseup上检查lastChild，以确保它是br元素。假设您有如下文档：

<div id="editable" contenteditable="true"></div>

---

在苹果操作系统X上测试，包括谷歌Chrome 7、Mozilla Firefox 3.6、苹果Safari 5）。尝试使用在Windows Internet Explorer中运行此功能。

我会将一个函数绑定到keyup事件以删除，并使用regEx更改为
。因此，即使它创建了奇怪的标记，它也会被修复

使用jQuery：

$('.myEditable').keyup(function(){
   var sanitazed = $(this).text().replace(/<div[^<]*?>/g, '').replace(/<\/div[^<]*?>/g, '<br>');
   $(this).text(sanitazed);
});

$（'.myEditable'）.keyup（函数（）{
var sanitazed=$（this）.text（）.replace（/不需要
range.collapse（false）；
：您已经定位了范围的开始和结束。iRange的另一个替代方法是my own Rangy（），它在概念上类似，但更全面地实现（并积极维护）。1.必须使用html（）而不是.text（）2）它可以工作，但光标保持在
之前，而不是之后（按Enter键后）。
$('.myEditable').keyup(function(){
   var sanitazed = $(this).text().replace(/<div[^<]*?>/g, '').replace(/<\/div[^<]*?>/g, '<br>');
   $(this).text(sanitazed);
});