CodeMirror 5单行编辑器实现：阻止换行输入问题求助

要实现单行编辑器替代<input type="text">，直接拦截回车键的默认行为是最靠谱的方式，比靠beforeChange事件判断更直接，也能避免你遇到的change.text为空的问题。

方法一：通过extraKeys配置拦截回车键 #

直接在初始化CodeMirror时配置extraKeys，把回车键的操作禁用：

// 假设你的原input元素id是"singleLineInput"
var cm = CodeMirror.fromTextArea(document.getElementById("singleLineInput"), {
  lineNumbers: false, // 隐藏行号
  lineWrapping: false, // 禁止自动换行
  height: "2em", // 设置单行高度，和原生input视觉一致
  scrollbarStyle: "null", // 隐藏滚动条，单行不需要
  extraKeys: {
    "Enter": function() {
      // 拦截回车，不执行任何操作
      return false;
    }
  }
});

方法二：修复beforeChange事件的判断逻辑 #

如果你坚持要用beforeChange事件，注意按下回车时可结合操作来源和文本内容判断：

cm.on('beforeChange', function(cm, change) {
  // 检查变更文本里是否包含换行符
  const hasNewline = change.text.some(line => line.includes('\n') || line.includes('\r'));
  // 判断是否是键盘输入的回车操作
  const isEnterKey = change.origin === '+input' && cm.getInputState().key === 'Enter';
  
  if (hasNewline || isEnterKey) {
    change.cancel();
  }
});

另外，记得把编辑器的高度设为单行高度，隐藏多余的UI元素（比如行号、滚动条），让它看起来和原生input一致。

内容的提问来源于stack exchange，提问作者user2531657