1

Is there a way to make text in text input look like textarea .I want the text to start from the top and goes back to line at the end but i don't want to use textarea

textinput : textinput textarea : textarea

Amine Mo
  • 81
  • 8
  • Does this answer your question? [How can make an input\[type=text\] element to work as textarea?](https://stackoverflow.com/questions/27037548/how-can-make-an-inputtype-text-element-to-work-as-textarea) – Bryan Dellinger May 06 '22 at 18:21
  • Tried it its still the same – Amine Mo May 06 '22 at 18:24
  • 3
    Curious why you would want to opt for a text `input` instead of `textarea` here? They're separately available for many reasons, one being the input text is only meant to accept one line. – Chris W. May 06 '22 at 18:27
  • well i want to use it in a form and the option value="" didn't work; – Amine Mo May 06 '22 at 18:30
  • 3
    `textarea` is literally made for usage in forms just as much as `input` is but for exactly this scenario. Except you don't set `value="blah"` as an element attribute, you set the content value directly (because it's for exactly this type of multi-line scenario) like `` and then if you change it programmatically it would be like `document.getElementsByTag('textarea')[0].value = 'HEY MORE FORMATTED MULTI-LINE CONTENT AS THE VALUE, WEEE!';` – Chris W. May 06 '22 at 18:36
  • By spec, `` is a single-line text field from which line-breaks are automatically removed and doesn't allow wrapping in multiple lines, whereas `` that supports a multi-line plain-text editing control for free-form text. Both can be semantically used in a `
    `, and because you'd need _some_ JavaScript to handle the data, you can certainly manage the inner text values for both. In this case, `` might be what you're looking for.     – Bumhan Yu May 06 '22 at 19:27

1 Answers1

1

It is not possible to use <input> tag with multiline. If <textarea> is not an option, then the only option is to use contenteditable attribute

<div contenteditable="true" style="width: 230px; height: 230px; word-break: break-word;"  >
   some text
</div>
Cholowao
  • 28
  • 3