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

@Rustam · Регистрация: 05.09.2009

Author24 — интернет-сервис помощи студентам

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

@Lazy_Den · 02.05.2014, 19:47

Rustam, переход на новую строку должен быть виден только при выводе в <div> или же и в <textarae> тоже?

@Rustam · 02.05.2014, 21:00 **[ТС]**

Lazy_Den, при выводе в <div> и в <textarea> тоже.

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

@Lazy_Den · 02.05.2014, 21:11

Rustam, по таким условиям, как у вас, вроде бы ничего сложного (тестируем тут)

Javascript

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, '<br />'));
});

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

@Rustam · 02.05.2014, 21:37 **[ТС]**

Lazy_Den, это было нужно для того, чтобы когда пользователь будет вводит слишком много текстового комментария, потом текст отправлялся в блоке div не появлялась горизонтальная полоса прокрутки в браузере, если так, лучше уж сразу фиксировано вводить символы и потом переходить на следующую строку, чтобы избежать неприятностей, спасибо большое за помощь, просто эта задача оказалась сложной для меня, но все-таки Ваш код работает

@Lazy_Den · 02.05.2014, 21:53

Сообщение от Rustam

но все-таки Ваш код работает

Работает - не значит, что работает правильно. Я задачу вашу представлял по своему и меня бы этот код никак не устроил. Но опять-таки, я вижу сложности, которые для вас могут быть не важны. Вот после вашего разъяснения у меня вообще возник вопрос - почему или в связи с чем может появляться горизонтальная прокрутка? В конце концов, почему бы не добавить этому блоку свойство word-break: break-all;?

@Rustam · 02.05.2014, 22:22 **[ТС]**

Lazy_Den, горизонтальная прокрутка появляется если введено слишком много текста и отправлено в div, спасибо большое Вам за помощь, word-break: break-all; и несколько параметров помогло, теперь все хорошо, все просто оказалось

@Rustam 17 / 29 / 3 Регистрация: 05.09.2009 Сообщений: 512
		1
	Автоматический перенос на следующую строку в Textarea при достижении 30 символов 02.05.2014, 19:12. Показов 4473. Ответов 6 Метки нет (Все метки) Всем привет, имеется текстовая область textarea, в нее вводиться текст, как можно сделать так, чтобы когда введено 30 символов, автоматически был переход на следующую строку? потом плюс 30 символов еще переход на следующую строку и так далее, и вывести весь текст в блок div. напишите пожалуйста пример? 0

@Lazy_Den 3325 / 2845 / 1423 Регистрация: 15.01.2014 Сообщений: 6,170
	02.05.2014, 19:47	2
	Rustam, переход на новую строку должен быть виден только при выводе в <div> или же и в <textarae> тоже? 0

@Rustam 17 / 29 / 3 Регистрация: 05.09.2009 Сообщений: 512
	02.05.2014, 21:00 [ТС]	3
	Lazy_Den, при выводе в <div> и в <textarea> тоже. Добавлено через 17 минут можно еще поставить кнопку Добавить и при нажатии на него данные из textarea добавляются в блок <div> а переход через каждые 30 символов остаются 0

@Rustam 17 / 29 / 3 Регистрация: 05.09.2009 Сообщений: 512
	02.05.2014, 21:37 [ТС]	5
	Lazy_Den, это было нужно для того, чтобы когда пользователь будет вводит слишком много текстового комментария, потом текст отправлялся в блоке div не появлялась горизонтальная полоса прокрутки в браузере, если так, лучше уж сразу фиксировано вводить символы и потом переходить на следующую строку, чтобы избежать неприятностей, спасибо большое за помощь, просто эта задача оказалась сложной для меня, но все-таки Ваш код работает 0

@Lazy_Den 3325 / 2845 / 1423 Регистрация: 15.01.2014 Сообщений: 6,170
	02.05.2014, 21:53	6
	Сообщение от Rustam но все-таки Ваш код работает Работает - не значит, что работает правильно. Я задачу вашу представлял по своему и меня бы этот код никак не устроил. Но опять-таки, я вижу сложности, которые для вас могут быть не важны. Вот после вашего разъяснения у меня вообще возник вопрос - почему или в связи с чем может появляться горизонтальная прокрутка? В конце концов, почему бы не добавить этому блоку свойство word-break: break-all;? 0

@Rustam 17 / 29 / 3 Регистрация: 05.09.2009 Сообщений: 512
	02.05.2014, 22:22 [ТС]	7
	Lazy_Den, горизонтальная прокрутка появляется если введено слишком много текста и отправлено в div, спасибо большое Вам за помощь, word-break: break-all; и несколько параметров помогло, теперь все хорошо, все просто оказалось 0