从role=textbox的文本框取值无法得到单行字符串？

你用contenteditable="true"的div模拟role="textbox"的输入元素时，这类可编辑div本身没有原生的单行输入限制，默认支持多行输入：用户按下回车时，浏览器会自动插入<br>或嵌套的<p>块级标签，通过innerText取值时，这些DOM结构的自然换行位置会被解析成\n换行符，最终得到带多行格式的字符串。

根据你的实际需求二选一即可：

1. 取值时统一格式化（兜底处理所有历史输入内容） #

拿到原始文本后，用正则匹配所有换行、回车字符做替换，直接输出单行字符串。如果是输入邮编这类不需要保留多余空白的场景，可以同时把连续的空白字符一并清除；如果是普通单行文本需要保留内容里的空格，仅替换换行符即可。
修改后的取值函数：

function getText() {
  let rawText = document.querySelector('[role="textbox"]').innerText;
  // 匹配所有换行、回车字符替换为空，去除首尾空白
  let singleLineText = rawText.replace(/[\r\n]+/g, '').trim();
  alert(singleLineText);
}

注意：原代码里的选择器[role=textbox]建议给属性值加双引号写成[role="textbox"]，避免特殊字符引发的选择器失效问题。

2. 从输入层禁止多行（适配输入5位邮编的业务场景） #

如果你的场景本身就只需要单行输入，最好从输入源头拦截，避免换行内容被插入DOM：

• 给可编辑div绑定keydown事件，检测到回车按下时直接阻止默认行为，禁止用户通过键盘输入换行
• 额外加粘贴拦截，自动清除粘贴内容里的换行符，避免用户不小心粘贴带换行的文本被拆成多行

完整可运行的代码实现：

// 页面加载完成后绑定输入拦截逻辑
window.addEventListener('DOMContentLoaded', () => {
  const editableBox = document.querySelector('[role="textbox"]');
  // 禁止键盘输入回车换行
  editableBox.addEventListener('keydown', (e) => {
    if (e.key === 'Enter') e.preventDefault();
  })
  // 拦截粘贴动作，清除内容里的换行
  editableBox.addEventListener('paste', (e) => {
    e.preventDefault();
    const cleanedPasteText = e.clipboardData.getData('text').replace(/[\r\n]+/g, '');
    document.execCommand('insertText', false, cleanedPasteText);
  })
})

function getText() {
  let text = document.querySelector('[role="textbox"]').innerText.trim();
  alert(text);
}

原有CSS、HTML结构不需要做任何调整，直接嵌入即可运行。

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