在前端开发中，contenteditable 属性是一个非常有用的工具，可以让用户直接在网页上编辑内容。但是，不同浏览器对于按回车键后的行为处理略有差异，这可能会导致一些问题。在本文中，我们将探讨如何在不同浏览器中改变 contenteditable 块的回车行为，以解决这些问题。
问题描述
当用户在 contenteditable 块中按下回车键时，浏览器会执行默认的行为，通常是插入一个新的段落或换行符。但是有时候，这个默认行为并不符合我们的需求。举个例子，假设我们正在构建一个富文本编辑器，希望在用户按下回车键时创建一个新的列表项，而非一个新的段落。在这种情况下，需要修改默认的回车行为。
解决方案
我们可以通过监听回车键事件来捕获用户按下回车键的操作，并采取相应的行动。以下是针对不同浏览器的解决方案：
Chrome 和 Safari
在 Chrome 和 Safari 中，当用户按下回车键时，会添加一个 <div> 元素作为新的段落，并将光标移到新段落中。如果我们要将回车键行为更改为添加一个新的列表项，可以在 keydown 事件中检查 keyCode 是否为 13，并阻止默认行为。然后，我们可以手动创建一个新的列表项，并将其插入到光标所在位置的父元素中。
示例代码：
------------------------------------ --------------- -
-- -------------- --- -- -- ---------------- -
-----------------------
--- --- - ----------------------
--- ----- - ------------------
--- -- - -----------------------------
-------------- - ---
---------------------
--------------------
-
---Firefox
在 Firefox 中，当用户按下回车键时，默认行为是插入一个 <br> 元素，而非新的段落。为了将回车键行为更改为添加一个新的列表项，我们需要监听 keypress 事件而非 keydown 事件，并检查 which 是否为 13，并阻止默认行为。和之前一样，我们可以手动创建一个新的列表项，并将其插入到光标所在位置的父元素中。
示例代码：
------------------------------------- --------------- -
-- ------------ --- -- -- ---------------- -
-----------------------
--- --- - ----------------------
--- ----- - ------------------
--- -- - -----------------------------
-------------- - ---
---------------------
--------------------
-
---Internet Explorer
在 Internet Explorer 中，当用户按下回车键时，默认行为是插入一个新的段落。为了将回车键行为更改为添加一个新的列表项，我们需要监听 keydown 事件，并检查 keyCode 是否为 13，并阻止默认行为。和之前一样，我们可以手动创建一个新的列表项，并将其插入到光标所在位置的父元素中。
示例代码：
------------------------------------ --------------- -
-- -------------- --- -- -- ---------------- -
-----------------------
--- --- - -------------------
--- ----- - ------------------
--- -- - -----------------------------
-------------- - ---
------------------------------
----------------------
-
---结论
通过监听回车键事件并采取相应的行动，我们可以改变 contenteditable 块的回车行为。虽然不同浏览器处理回车键的方式
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/30608