防止 contentEditable 中的换行/段落分隔-JavaScript中文网-JavaScript教程资源分享门户

背景

contentEditable 是一个 HTML5 新增的属性，它使得一个元素可以被用户编辑。当使用 contentEditable 属性时，浏览器会在元素内部创建一个可编辑的区域，用户可以在其中输入文本、插入图片等。

然而，在使用 contentEditable 进行富文本编辑时，往往会遇到一些问题。其中之一就是换行符和段落分隔符的处理。在某些情况下，我们希望用户在编辑时不产生任何换行符或段落分隔符，比如在创建富文本编辑器或简历编辑器等场景中。

解决方案

方法一：使用 CSS

最简单的方法是使用 CSS 来防止换行符和段落分隔符的出现。我们可以使用 white-space: nowrap 和 display: inline-block 属性来实现这个效果。

<div contentEditable="true" style="white-space: nowrap; display: inline-block;"></div>

这样设置后，用户在编辑时输入的文本就不会自动换行，而是一直在同一行内显示。

方法二：使用 JavaScript

如果你需要更复杂的控制方式，那么可以使用 JavaScript 来解决这个问题。这里提供两种方案。

方案一：拦截输入事件

我们可以通过监听 keydown 事件来拦截用户输入的换行符和段落分隔符。如果用户输入了这些字符，我们就可以从事件中阻止默认行为，以此来实现防止它们出现的效果。

document.querySelector('[contentEditable="true"]').addEventListener('keydown', function(event) {
  if (event.keyCode === 13 || event.keyCode === 10) { // Enter key
    event.preventDefault();
  }
});

方案二：过滤内容

另一种方法是在用户编辑结束后，对编辑区域内的内容进行过滤。我们可以使用正则表达式来匹配并替换掉换行符和段落分隔符。

var editable = document.querySelector('[contentEditable="true"]');
editable.addEventListener('blur', function() {
  var content = editable.innerHTML;
  content = content.replace(/<br>/g, '');
  content = content.replace(/<\/p>/g, '');
  content = content.replace(/<p[^>]*>/g, '');
  editable.innerHTML = content;
});

注意事项

在防止换行符和段落分隔符时，需要注意不要影响到用户输入其他文本的能力。例如，不能禁止用户在编辑区域内输入回车键。
使用 JavaScript 进行操作时，需要考虑浏览器兼容性问题。

总结

以上两种方法都可以用于防止 contentEditable 中的换行符和段落分隔符。使用 CSS 可以快速简单地实现目标效果，而使用 JavaScript 则可以更加灵活地控制内容。但需要注意的是，在实现这个功能时要注意不影响用户输入其他文本的能力。

来源：JavaScript中文网，转载请注明来源 https://www.javascriptcn.com/post/28386