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

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

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

将文本内容中的所有n

(导致多行的新行字符)替换为空格字符。

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 2

您可以使用StringsreplaceAll()

来替换所有的新行字符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 3

理解起来很复杂，但这可以通过用空格替换行上的所有返回来达到目的。

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);
}