Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 20.10.2013, 15:14
Интересующийся
Отправить личное сообщение для Авас Посмотреть профиль Найти все сообщения от Авас
 
Регистрация: 05.10.2013
Сообщений: 19

Чтобы функция выполнялась в нескольких textarea
Вот скрипт monolithed'a, который растягивает textarea по мере ввода текста:
<script type="text/javascript">
window.onload = function(){
	document.getElementById("element").onkeyup = function(){
		var getText = this.value;
		var getRegs = getText.match(/^.*(\r\n|\n|$)/gim);
		var setText = false;
		for(var i = 0; i < getRegs.length; i++){
			getText = getRegs[i].replace(/\r|\n/g, "");
			setText += getText.length ? Math.ceil(getText.length / 50) : 1;
		}
		this.rows = setText;
	};
};
</script>
<textarea rows="10" cols="50" id="element" style="overflow: hidden; min-height: 200px"></textarea>

Но он применим только к одному textarea (
Я пробовал испольовать class вместо id:
document.getElementsByClassName("element").onkeyup

<textarea rows="10" cols="50" class="element" style="overflow: hidden; min-height: 200px"></textarea><br>
<textarea rows="10" cols="50" class="element" style="overflow: hidden; min-height: 200px"></textarea>

но тогда вообще ничего не работает! ) Как сделать так, чтобы функция работала в нескольких textarea'х?
Ответить с цитированием
  #2 (permalink)  
Старый 20.10.2013, 15:21
Аватар для SkyLight
Злюка-бобер
Отправить личное сообщение для SkyLight Посмотреть профиль Найти все сообщения от SkyLight
 
Регистрация: 21.03.2010
Сообщений: 438

document.getElementsByClassName("element") вернет массив элементов. Теперь вам надо их перебрать и повесить обработку на каждый.
__________________
In WEB We Trust
У всех есть своя темная сторона...
Ответить с цитированием
  #3 (permalink)  
Старый 20.10.2013, 16:01
Интересующийся
Отправить личное сообщение для Авас Посмотреть профиль Найти все сообщения от Авас
 
Регистрация: 05.10.2013
Сообщений: 19

Фраза "Теперь вам надо их перебрать и повесить обработку на каждый" меня испугала и заставила задуматься: а надо ли мне это вообще ))
Но, благо, нашёлся в интернете добрый человек, который выложил скрипт авторастяжки поля комментирования:
<script type="text/javascript">
// функция подсчета количества строк
function countLines(strtocount, cols) {
	var hard_lines = 1;
	var last = 0;
	while ( true ) {
		last = strtocount.indexOf("\n", last+1);
		hard_lines ++;
		/* if ( hard_lines == 35) break; */
		if ( last == -1 ) break;
		}
	var soft_lines = Math.ceil(strtocount.length / (cols-1));
	var hard = eval("hard_lines " + unescape("%3e") + "soft_lines;");
	if ( hard ) soft_lines = hard_lines;
	return soft_lines;
}

// функция вызывается при каждом нажатии клавиши в области ввода текста
function ResizeTextArea(the_form,min_rows) {
	the_form.rows = Math.max(min_rows,countLines(the_form.value,the_form.cols) +1);
}
</Script>


<h1>Скрипт для авторастяжки поля комментирования</h1>

<p>Это универсальный скрипт растягивания, не зависящий от имен полей.</p>
<p>Вводите сюда текст, дополнительные строки будут добавляться автоматически:</p>
<form>
  <textarea rows="2" cols="50" OnKeyUp="ResizeTextArea(this,2);">
  </textarea>
</form>


Лишь чуток его апгрейдил и получилось то, что надо:
<script type="text/javascript">
// функция подсчета количества строк
function countLines(strtocount, cols) {
	var hard_lines = 0;
	var last = 0;
	while ( true ) {
		last = strtocount.indexOf("\n", last+1);
		hard_lines ++;
		/* if ( hard_lines == 35) break; */
		if ( last == -1 ) break;
		}
	var soft_lines = Math.ceil(strtocount.length / cols);
	var hard = eval("hard_lines " + unescape("%3e") + "soft_lines;");
	if ( hard ) soft_lines = hard_lines;
	return soft_lines;
}

// функция вызывается при каждом нажатии клавиши в области ввода текста
function ResizeTextArea(the_form,min_rows) {
	the_form.rows = Math.max(min_rows,countLines(the_form.value,the_form.cols));
}
</Script>

<form>
  <textarea rows="1" cols="30" style="overflow:hidden;min-height:40px;resize:vertical;" OnKeyUp="ResizeTextArea(this,2);"></textarea><br>
  <textarea rows="1" cols="30" style="overflow:hidden;min-height:40px;resize:vertical;" OnKeyUp="ResizeTextArea(this,2);"></textarea>
  </textarea>
</form>

Последний раз редактировалось Авас, 20.10.2013 в 17:23.
Ответить с цитированием
  #4 (permalink)  
Старый 20.10.2013, 17:06
Аватар для BETEPAH
Профессор
Отправить личное сообщение для BETEPAH Посмотреть профиль Найти все сообщения от BETEPAH
 
Регистрация: 23.06.2011
Сообщений: 1,165

Обратите внимание
document.getElementsByClassName("element")
document.getElementById("element")
Ответить с цитированием
  #5 (permalink)  
Старый 20.10.2013, 17:34
Интересующийся
Отправить личное сообщение для Авас Посмотреть профиль Найти все сообщения от Авас
 
Регистрация: 05.10.2013
Сообщений: 19

BETEPAH,
я указывал именно document.getElementsByClassName("element"), если Вы об этом.
Ответить с цитированием
  #6 (permalink)  
Старый 20.10.2013, 17:43
Аватар для BETEPAH
Профессор
Отправить личное сообщение для BETEPAH Посмотреть профиль Найти все сообщения от BETEPAH
 
Регистрация: 23.06.2011
Сообщений: 1,165

Сообщение от Авас
я указывал именно document.getElementsByClassName("element"), если Вы об этом.
Здесь был вопрос от вас, который уже удалили и в котором спрашивалось, мол, если в getElementsByClassName на выходе получается массив, что же получается на выходе getElementById.
Вот я и обратил на окончание 's'. Оно должно в будущем вам намекать, что если есть 's', значит на выходе получается массив элементов ('Elements' в переводе с английского - 'элементЫ'). А если нет 's', значит на выходе один элемент.

А вешать обработчик через онлайновый OnKeyUp="ResizeTextArea(this,2);" - это некошерно. Лучше научиться сразу отделять мух от котлет (скрипты от оформления), чем потом переучиваться.
По поводу скрипта в топике, надо было пройтись по массиву вот так:
var elements = document.getElementsByClassName("element");
for (var i = 0; i < elements.length; i++) {
elements[i].onkeyup = //......
}

только и всего.

Последний раз редактировалось BETEPAH, 20.10.2013 в 17:52.
Ответить с цитированием
  #7 (permalink)  
Старый 20.10.2013, 18:01
Интересующийся
Отправить личное сообщение для Авас Посмотреть профиль Найти все сообщения от Авас
 
Регистрация: 05.10.2013
Сообщений: 19

Да, это я затёр на тот момент безответный вопрос...

Т.е. массив будет состоять из данных со всех полей, содержащих указанный класс?
Просто я думал, что сдесь class, аналогичен классам в css: где ты задаёшь свойства классу, присваиваешь элементам этот класс, и всё эти элементы наделяются свойствами, указанными в слассе.
Ответить с цитированием
  #8 (permalink)  
Старый 20.10.2013, 18:07
Аватар для BETEPAH
Профессор
Отправить личное сообщение для BETEPAH Посмотреть профиль Найти все сообщения от BETEPAH
 
Регистрация: 23.06.2011
Сообщений: 1,165

Сообщение от Авас
Т.е. массив будет состоять из данных со всех полей, содержащих указанный класс?
да. Этот метод ищет все классы и собирает элементы в массив.
Так же как и, например, getElementsByTagName
Ответить с цитированием
  #9 (permalink)  
Старый 20.10.2013, 18:46
Интересующийся
Отправить личное сообщение для Авас Посмотреть профиль Найти все сообщения от Авас
 
Регистрация: 05.10.2013
Сообщений: 19

<script type="text/javascript">
	window.onload = function(){
	    document.getElementsByClassName("element").onkeyup = function(){
	        var getText = this.value;
	        var getRegs = getText.match(/^.*(\r\n|\n|$)/gim);
	        var setText = false;
	        for(var i = 0; i < getRegs.length; i++){
	            getText = getRegs[i].replace(/\r|\n/g, "");
	            setText += getText.length ? Math.ceil(getText.length / 50) : 1;
	        }
	        this.rows = setText;
	    };		
		var elements = document.getElementsByClassName("element");
		for (var i = 0; i < elements.length; i++) {
		elements[i].onkeyup = function(){
	        var getText = this.value;
	        var getRegs = getText.match(/^.*(\r\n|\n|$)/gim);
	        var setText = false;
	        for(var i = 0; i < getRegs.length; i++){
	            getText = getRegs[i].replace(/\r|\n/g, "");
	            setText += getText.length ? Math.ceil(getText.length / 50) : 1;
	        }
	        this.rows = setText;
	    };
	};
};
</script>

Я очень далёк от истины? )

<textarea rows="2" cols="50" class="element" style="overflow: hidden; min-height: 40px"></textarea>
<textarea rows="2" cols="50" class="element" style="overflow: hidden; min-height: 40px"></textarea>
Ответить с цитированием
  #10 (permalink)  
Старый 20.10.2013, 18:50
Аватар для BETEPAH
Профессор
Отправить личное сообщение для BETEPAH Посмотреть профиль Найти все сообщения от BETEPAH
 
Регистрация: 23.06.2011
Сообщений: 1,165

window.onload = function(){
	/*
	    document.getElementsByClassName("element").onkeyup = function(){
	        var getText = this.value;
	        var getRegs = getText.match(/^.*(\r\n|\n|$)/gim);
	        var setText = false;
	        for(var i = 0; i < getRegs.length; i++){
	            getText = getRegs[i].replace(/\r|\n/g, "");
	            setText += getText.length ? Math.ceil(getText.length / 50) : 1;
	        }
	        this.rows = setText;
	    };		
	*/
		var elements = document.getElementsByClassName("element");
		for (var i = 0; i < elements.length; i++) {
		elements[i].onkeyup = function(){
	        var getText = this.value;
	        var getRegs = getText.match(/^.*(\r\n|\n|$)/gim);
	        var setText = false;
	        for(var i = 0; i < getRegs.length; i++){
	            getText = getRegs[i].replace(/\r|\n/g, "");
	            setText += getText.length ? Math.ceil(getText.length / 50) : 1;
	        }
	        this.rows = setText;
	    };
	};
};


закомментировал лишнее
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Как сделать чтобы функция сработала для подргуженого контента? olexand777 jQuery 5 28.01.2013 17:54
Как сделать чтобы textarea тянулась в высоту при добавлении в нее текста? javasc Общие вопросы Javascript 4 27.03.2012 22:14
Универсальная функция для сворачивания нескольких типовых блоков fennick Элементы интерфейса 7 26.09.2011 13:23
Как сделать чтобы у textarea увеличивался rows с каждой новой строчкой rusbody Общие вопросы Javascript 1 19.03.2011 16:43
Resize textarea, в копилку. Robox jQuery 0 17.01.2011 18:05