从文本框中获取值不会给出单行字符串？

Question

这是我的代码。我正在使用 role="textbox" 并从中获取价值。但是，当我在文本框中输入多行文本时，它会以多行形式给出值。如何在一行中获取此值？

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

.textbox{
border: 1px solid;
}

<div>
    <div id="txtboxLabel">Enter your five-digit zipcode</div>
    <button onclick=getText()>
    Get TextBox Data
    </button>
    <div class="textbox" role="textbox" contenteditable="true" aria-labelledby="txtboxLabel"></div>
</div>

Answer 1

您可以使用字符串 replaceAll()

替换所有换行符 \n

text = text.replaceAll('\n', "");

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

.textbox{
border: 1px solid;
}

<div>
    <div id="txtboxLabel">Enter your five-digit zipcode</div>
    <button onclick=getText()>
    Get TextBox Data
    </button>
    <div class="textbox" role="textbox" contenteditable="true" aria-labelledby="txtboxLabel"></div>
</div>

Answer 2

您可以使用 String.prototype.replaceAll():

将文本内容中的所有 \n（导致多行的新行字符）替换为 space 字符

function getText() {
  let text = document.querySelector('[role=textbox]').innerText.replaceAll('\n',' ');
  alert(text);
}

.textbox{
  border: 1px solid;
}

<div>
    <div id="txtboxLabel">Enter your five-digit zipcode</div>
    <button onclick=getText()>
    Get TextBox Data
    </button>
    <div class="textbox" role="textbox" contenteditable="true" aria-labelledby="txtboxLabel"></div>
</div>

Answer 3

理解起来很复杂，但这可以通过将行中的所有 return 替换为 space.

来达到目的

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

如果你只想要第一行：

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

从文本框中获取值不会给出单行字符串？

getting value from textbox doesn't give a single line string?

javascript

textbox