Javascript textarea перенос строки

Автоматический перенос на следующую строку в Textarea при достижении 30 символов

Всем привет, имеется текстовая область textarea, в нее вводиться текст, как можно сделать так, чтобы когда введено 30 символов, автоматически был переход на следующую строку? потом плюс 30 символов еще переход на следующую строку и так далее, и вывести весь текст в блок div. напишите пожалуйста пример?

Автоматический перенос слов на новую строку textarea
Здравствуйте, все перерыл, перепробовал, надо чтоб текст в текстареавыводился не в одну строку, а в.

Автоматический переход на следующую строку таблицы при заполнении предыдущей
Доброго дня! Описание: Имеется форма, с несколькими элементами управления, посредством которых.

Авто перенос курсора в Richedit при достижении длины строки определенного числа символов.
Вопрос — как в RichEdit эмулировать нажатие клавиши enter или просто осуществить перенос каретки.

Не происходит перенос на следующую строку при записи в файл
Добрый день. Подскажите, пожалуйста, почему при записи в файл у меня игнорируется знак "\n" в.

Lazy_Den, при выводе в и в тоже.

Добавлено через 17 минут
можно еще поставить кнопку Добавить и при нажатии на него данные из textarea добавляются в блок а переход через каждые 30 символов остаются

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15

var txtInput = $('#txt_input'), symbs = 30, // кол-во символов, по которому нужно переносить на новую строку re = /(\r\n|\r|\n)+/g, cnt, cVal; txtInput.on('input', function(){ cVal = $(this).val(); cnt = cVal.replace(re,'').length; if(cnt % symbs == 0){ $(this).val(cVal + '\n'); } }); $('button').on('click', function(){ $('#txt_output').html(txtInput.val().replace(re, '
')); });

Но возникает целый ряд вопросов. Вас не смущает, что могут разбиваться слова и как нужно действовать, если пользователь сам будет делать переход на новую строку, важно ли учитывать пробелы и т.д.?

Источник

Перенос строки в textarea.

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

Обсуждения

http://htmlbook.ru/html/area на одной картинке можно организовать несколько областей ссылок ведущих на разные страницы

margin внутри таблицы не работает, кста еще можно вот так реализовать так заливка ячеек будет корректно работать, если она нужна будет

row 1 cell 1	row 1 cell 2	row 1 cell 3 must contain several lines
row 2 cell 1	row 2 cell 2
row 3 cell 1	row 3 cell 2
row 4 cell 1	row 4 cell 2
row 5 cell 1	row 5 cell 2	row 5 cell 3
row 6 cell 1	row 6 cell 2	row 5 cell 3

если не критично еще можно использовать обертку внутри ячеек, и с ней много чего можно дополнительного реализовать в таблицах

Switch74 Спасибо, второй вариант как раз то, что хотелось. Не понятно только, почему margin-top не работает, пробовал задавать и для клеточек, и для всей строки. А про padding как-то не подумал.

тогда как выше предложили пустую строку

row 1 cell 1	row 1 cell 2	row 1 cell 3 must contain several lines
row 2 cell 1	row 2 cell 2
row 3 cell 1	row 3 cell 2
row 4 cell 1	row 4 cell 2
row 5 cell 1	row 5 cell 2		row 5 cell 3
row 6 cell 1	row 6 cell 2	row 5 cell 3

или если подсветка ячеек не обязательна, то можно так

row 1 cell 1	row 1 cell 2	row 1 cell 3 must contain several lines
row 2 cell 1	row 2 cell 2
row 3 cell 1	row 3 cell 2
row 4 cell 1	row 4 cell 2
row 5 cell 1	row 5 cell 2	row 5 cell 3
row 6 cell 1	row 6 cell 2	row 5 cell 3

Источник

Работа с Textarea jQuery

Сборник jQuery приёмов с textarea – получить содержимое, вставить значение, подсчет количества символов и строк и т.д.

Во всех примерах используется следующий HTML код:

Получить содержимое Textarea

Получить строчку из Textarea

Метод split() разбивает строку на массив по регулярному выражению, в данном случае по переносу строк. Нумерация индексов массива начинается с 0.

function get_line(value, line) < var lines = value.split(/[\r\n]+/); return lines[line]; >alert(get_line($('#textarea').val(), 1)); // Выведет значение 2-й строки. 

Вставить значение в Textarea

Добавление строк в начало и конец

Для удаления лишних переносов начале и конце значения textarea используется jQuery метод $.trim() .

// Добавить текст в начало. $('#textarea').val($.trim('Текст в начале.' + '\n' + $('#textarea').val())); // Добавить текст в конец. $('#textarea').val($.trim($('#textarea').val() + '\n' + 'Текст в конце.'));

Очистить поле

Фокусировка

Установить фокус

Обработка смены фокуса Textarea

// Событие когда textarea получил фокус. $('#textarea').focus(function()< alert('Фокус установлен'); >); // Когда textarea теряет фокус. $('#textarea').blur(function()< alert('Фокус снят'); >);

Выделение текста в текстовом поле

Заблокировать и разблокировать

// Заблокировать $('#textarea').prop('disabled', true); // Разблокировать $('#textarea').prop('disabled', false);

Подсчет количества символов

JS свойство length возвращает количество символов для строк и количество элементов для массивов. Перенос строки считается как отдельный символ, для символа эмодзи length возвращает как минимум 2.

$('#textarea').bind('input', function()< $('#result').html($(this).val().length); >);

Подсчет количества строк

$('#textarea').bind('input', function()< $('#result').html($(this).val().split('\n').length); >);

Принудительный регистр вводимого текста

// Строчные $('#textarea-1').bind('input', function()< $(this).val($(this).val().toLowerCase()); >); // Заглавные $('#textarea-2').bind('input', function()< $(this).val($(this).val().toUpperCase()); >);

Определить есть ли вертикальный скролл

Свойство scrollHeight возвращает значение высоты контента в элементе, включая скрытые области из-за прокрутки, а также padding элемента, но не margin.

innerHeight() возвращает высоту элемента без учета границ.

$('#textarea').on('input', function(e) < if (this.scrollHeight >$(this).innerHeight()) < $('#result').html('Есть'); >else < $('#result').html('Нет'); >>);

Отправить значение textarea через ajax

$('#textarea').bind('input', function()< $.ajax(< url: '/ajax.php', method: 'post', dataType: 'html', data: , success: function(data) < $('#result').html(data); >>); >);

Источник

Как вывести текст в textarea не потеряв переносы строк в тексте?

НЕТ ошибки в консоли:
Но, абзац текста выводится в textarea с недостатками:

— переносы исчезли
— текст выводится с html-сущностями
— и еще слитной колбасой..

Мама мыла\r\nраму чисто\r\nи быстро!

>можно тут почистить эти сущности \n\r, но будут только пробелы вместо переносов..

$var_zametka = str_replace ('\r\n', '\n', $var_zametka); $var_zametka = nl2br(htmlspecialchars($var_zametka)); $var_zametka = html_entity_decode($var_zametka); $var_zametka = html_entity_decode($var_zametka, ENT_QUOTES | ENT_HTML5, 'UTF-8');

1 — пишу абзац текста с переносами в textarea

Мама мыла
раму чисто
и быстро!

2 — Отправляю в SQL-базу НЕ МЕНЯЯ на HTML-сущности

3 — Оригинальные системные переносы сохраняются в SQL — базе

4 — лезу руками в SQL-базу, меняю

5 — Читаю из SQL-базы обратно в textarea

Абзац текста выводится в textarea так:

Мама мыла‧раму чисто‧и быстро!

— вместо переносов — точки!
— и опять слитной колбасой..
— ну и руками в SQL лазить как бы вообще не надо это чтоб понять механику..

Средний 6 комментариев

Дмитрий, так так, вроде нечего связанного с процессом чтения/записи текста в базу..
есть предположение, что когда php печатает мой текст из SQL базы в html страницу, вылезают как раз не экранированные спец-символы переноса, которые в свою очередь приводят к появлению такой ошибки..

И причем, когда я убиваю запись с текстом содержащие такие переносы — ошибка тут же исчезает..

Алексей, html плевать хотел на любые переносы — и не будет сообщать об синтаксической ошибке. Js не все равно — и ровно он будет ругаться. Вопрос что у вас там делает js и зачем?

Выясняйте не пропадание переносов, а причину ошибки JS на пустой строке ».

Дмитрий, Я передаю данные действительно JS функцией (а точнее jQuery )по имени компонента textarea:

Данные поступают без проблем. Тут задача правильно читать из базы спец-символы переносов ( /n/r )

ВАРИАНТ 4-Й, очевидный
1 — пишу абзац текста с переносами в textarea
2 — Отправляю в SQL-базу ничего не меняя.
3 — Оригинальные системные переносы сохраняются в SQL — базе, как и должны, поскольку любые заморочки с яваскриптами к базе данных не имеют вообще никакого, ни малейшего отношения
4 — Читаю из SQL базы
5 — Вывожу в обратно в texarea
6 — В texarea ВСЁ РАБОТАЕТ! A magic! При том что мы вообще нигде ничего ни на что не меняли

6a — По поводу HTML сущностей. Хотя в приведённом примере нет ни одного символа, который бы требовал перекодирования в HTML-сущности, тем не менее, при выводе любого текста в HTML, эти сущности действительно должны быть перекодированы в обязательном порядке, всегда, в 100% случаев. Причем с помощью не какой-то левой addslashes, а функции, которая действительно это делает, htmlspecialchars($var_zametka)

7 — Собираюсь с мыслями, и напряжённо думаю — в каком месте у меня текст взаимодействует с яваскриптом? Который к выводу текста в текстарию не имеет ни малейшего отношения?
8 — думаю.
9 — думаю.
10 — наконец-то нахожу.
11 — перед тем, как отправлять текст в яваскрипт, кодируем его тем методом, который специально предназначен для отправки данных в яваскрипт, а не какими-то шаманскими заклинаниями и плясками с бубном. echo json_encode($var_zametka)
12 — ВСЁ РАБОТАЕТ! Просто потому, что получилось расхлебать кашу в голове, в которой SQL путается с РНР, HTML c яваскриптом, а экранирование спецсимволов почему-то называется заменой на HTML-сущности. Хотя если открыть документацию на абсолютно бесполезную функцию addslashes, то там ни одного разочка слово HTML не встретится.

Спасибо за подробный ответ.
Пока не могу сложить всё воедино..

У меня эта команда ошибку выдаёт.. вернее ломается полностью страница,
И она ДАЖЕ не отображается как функция PHP.

Отлаживаю на OpenServer. В настройках выставлен PHP_7.1

А команда я так понял доступна только с PHP 8.0.24

Это ж наверное обновлять OpenServer нужно.. Ох после обновления чую ряд функционала может отвалиться..

В любом случае спасибо за идею..

Источник

Перенос строки в textarea

Очистка окна textarea и перенос строки при отображении
Всем привет! Помогите пожалуйста! Код, который вставлен ниже рабочий, но требует не большой.

Перенос выделенного текста из тега textarea
Здравствуйте, есть такая задача: в теге textarea выделяется текст, это выделение нужно находить и.

Автоматический перенос на следующую строку в Textarea при достижении 30 символов
Всем привет, имеется текстовая область textarea, в нее вводиться текст, как можно сделать так.

Сообщение было отмечено qw123456 как решение

Решение

Атрибут wrap говорит браузеру, как осуществлять перенос текста в поле и в каком виде отправлять данные на сервер. Если этот атрибут отсутствует, текст в поле набирается одной строкой, когда число введенных символов превышает ширину области, появляется горизонтальная полоса прокрутки. Нажатие кнопки Enter переносит текст на новую строку, и курсор устанавливается у левого края поля.</p> <p>

Синтаксис
<br />
Значения
soft
Длинный текст, который самостоятельно не помещается в поле по ширине, будет автоматически перенесен на новую строку, однако передаваться на сервер будет как одна строка. Нажатие клавиши Enter устанавливает перенос текста, который сохраняется при отправке формы.
hard
Слова в поле переносятся механически, чтобы они поместились в размер области, и при отправке на сервер места автоматического переноса сохраняются. При этом значении обязательно должен присутствовать атрибут cols.
off
Нестандартное значение. Переносы строк отключены. При введении длинного текста без переносов, он будет печататься в одну строку, при этом будет отображаться полоса прокрутки.

Источник