How to make input text or textarea no wrap but multi-line?

The essence of the thing. There is a form. Where there is a field to enter notes:
5c9c82aadec2e076457151.png

If I use input type="text", we get a one-line note, which works almost as it should. But, if the note is long, it all goes outside (shifts in the input string) and the user complains that they say did not see the beginning.

If I use textarea, then we have a multi-line note, and the database is not provided. And after making it into the database, the return comes from, where the lines already made and the user complains again, saying everything I broke and I wrote everything was clear.

Accordingly, the question. How to make the comment was a single line, but when the user with text suddenly crosses the edge of the input field, the text appeared visually on the next Stoke, but no transfers in real life from happening.

In my opinion for this case would fit perfectly input type="text" if he could translate the line below when it reaches the edge of the input field.

But I'd agreed to textarea only in the case that it was not possible to press ENTER and write on a new line.

What can you recommend?
March 19th 20 at 08:58
2 answers
March 19th 20 at 09:00
Solution
In short decided via js, so it was easier.
<textarea type="text" class="md-textarea form-control border-top input-note" rows="2"></textarea>

// disable pressing ENTER in the input field
 $('.input-note').on('keydown', function (e) {
 if (e.keyCode === 13) {
e.preventDefault();
whenEnterPressed();
}
 });
March 19th 20 at 09:02
It is possible in the event oninput, replace the newlines with an empty string. Thus, will not be lost automatic hyphenation, but only manual.
Example
Thank you of course.
But, similarly I have tried to solve the issue. But again the management says, what they say is wrong. Because users enter one figure mnohostranne. And then whine, blindly saying that all in one line. I even have spaces inserted, so didn't kepleris. No. Want to fish and somewhere to sit. So I suggested that the notes were all one line, but in the text boxes the text hasn't gone anywhere, but moved to the next line. - lula.Co commented on March 19th 20 at 09:05
@lula.Co, uh, do not understand what you want to get the output.
If I use textarea, then we have a multiline note

Multiline it only visually, the value in the same row.
Because users enter one figure mnohostranne.

I mean? A single-line field.
but in the text boxes the text hasn't gone anywhere, but moved to the next line.

Well, it happens. - Leatha_Goldn commented on March 19th 20 at 09:08
@Leatha_Goldn, this happens when they press Enter, they always shake. - lula.Co commented on March 19th 20 at 09:11
@lula.Co,
on input,||textarea on onkeyup event
if(e.code === 'Enter') {
e.target.value += ' ';
return;
}
- chad.Walsh95 commented on March 19th 20 at 09:14
@lula.Co, so and what should it? In my example, enter key is ignored, it turns out like a single-line field with hyphens. - Leatha_Goldn commented on March 19th 20 at 09:17
@Leatha_Goldn, I honestly did not even realize that it was necessary for the tabs to stick. Looked at some html, I think apparently something did not finish people. - lula.Co commented on March 19th 20 at 09:20

Find more questions by tags HTMLCSS