Are html text inputs able to have multiple lines like the text area element-CodePudding

all. I'm curious to know if the regular text input (not text area) could detect multiple lines value. If I copy any string that has various lines and pastes it into a standard input box, it will display as a single-line string and has no idea whether it has multiple lines or a single line.

I just want to know if we can preserve the original value (with multiple lines)

Original string value

INVOICE_500
INVOICE_501

After pasting it into the regular text input

INVOICE_500 INVOICE_501

Thanks in advance.

CodePudding user response：

I found an article from a previous post where an way has been shown. We can use clipboard API as it copy text as it was written. It was applied on a div. I have converted it on a input field. I have attached the code below. Hope this might help you.

Reference article: Clipboard data on paste event

function handlePaste(e) {
  var clipboardData, pastedData;

  // Stop data actually being pasted into input
  e.stopPropagation();
  e.preventDefault();

  // Get pasted data via clipboard API
  clipboardData = e.clipboardData || window.clipboardData;
  pastedData = clipboardData.getData('Text');

  // Do whatever with pasteddata
  alert(pastedData);
}

document.getElementById('pasteInput').addEventListener('paste', handlePaste);

<input id='pasteInput' placeholder='Paste text here'></div>

CodePudding user response：

No you can't, the only HTML input element that's designed to be multi-line is the "textarea" element.

<textarea name="textArea" cols="40" rows="5">