Как сделать input text или textarea без переноса, но многострочные?

Question

[Максим Зубенко]

Суть в чём. Существует форма. В которой есть поле для ввода примечания:


Если я использую input type="text", то мы получаем однострочное примечание, которое работает почти как надо. Но, если вдруг примечание длинное, то всё уходит за пределы (смещается в строке ввода) и пользователь жалуется, что мол не видит начало.

Если я использую textarea, то мы получаем многострочное примечание, а в БД это не предусмотрено. И после внесения в БД, возврат приходит, где уже строчки слепленные и пользователь снова жалуется, мол всё мне поломало, а я писал всё было понятно.

Соответственно вопрос. Как сделать, чтобы комментарий был однострочным, но когда пользователь своим текстом вдруг пересекает край поля ввода, текст визуально оказывался на следующей стоке, но при этом никаких переносов в реале не происходило.

На мой взгляд под это дело прекрасно бы подошёл input type="text", если бы он мог переводить строку ниже при достижении края поля ввода.

Но я бы и согласился на textarea лишь в том случае, чтобы не было возможности нажимать ENTER и писать с новой строки.

Что можете посоветовать?

Answer 1

[Максим Зубенко]

Короче решил через js, так оказалось проще.

<textarea type="text" class="md-textarea form-control border-top input-note" rows="2"></textarea>

// запрет нажатия ENTER в поле ввода
            $('.input-note').on('keydown', function (e) {
                if (e.keyCode === 13) {
                    e.preventDefault();
                    whenEnterPressed();
                }
            });

Answer 2

[Владимир Проскурин]

Можно при событии oninput, заменять переводы строки на пустую строку. Таким образом, не потеряются автоматические переносы, а только ручные.
Пример

Comments

[Максим Зубенко]

Спасибо конечно.
Но, подобным образом я уже пытался решить вопрос. Но опять руководство, говорит, что мол не то. Потому что пользователи вводят один фиг многострочно. И потом ноют, что мол всё слепилось в одну строку. Я даже пробелы вставлял, чтобы предложения не слеплялись. Нет. Хотят и рыбку и куда-то сесть. Поэтому я предложил, чтобы примечания все были однострочные, но в полях ввода текст никуда не уезжал, а переходил на следующую строку.

[Владимир Проскурин]

Максим Зубенко, эмм, вообще не понял, что вы хотите получить на выходе.

Если я использую textarea, то мы получаем многострочное примечание

Многострочное оно только визуально, значение же в одну строку.

Потому что пользователи вводят один фиг многострочно.

В смысле? Поле однострочное.

но в полях ввода текст никуда не уезжал, а переходил на следующую строку.

Ну так и происходит.

[Максим Зубенко]

Владимир Проскурин, так происходит, если они не жмут Enter, а они постоянно жмут.

[Александр]

Максим Зубенко,
на инпут||текстареа на событие onkeyup

if(e.code === 'Enter') {
e.target.value += ' ';
return;
}

[Владимир Проскурин]

Максим Зубенко, так а что надо то? В моем примере enter игнорируется, получается типа однострочное поле с переносами.

[Максим Зубенко]

Владимир Проскурин, да я честно сказать даже и не понял, что надо было по вкладкам тыкать. Посмотрел, какой-то html, думаю видимо чего-то не дописал человек.