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

Question

Here is my code. I am using role="textbox" and getting value from it. But, when I enter more than one line of text in the textbox, it gives me the value in multiple lines. How do I get this value in a single line?

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>

score 1 · Answer 1 · answered Feb 12 '21 at 16:35

You can replace all the new line characters \n by using Strings replaceAll()

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>

score 1 · Accepted Answer · answered Feb 12 '21 at 16:36

You can replace all \n (new line character that causes the multi line) with space character from the text content using String.prototype.replaceAll():

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>

score 1 · Answer 3 · answered Feb 12 '21 at 16:38

Complicated to understand but this can do the trick by replacing all return at the line by space.

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

If you want only the first line:

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?

3 Answers3