Чтобы функция выполнялась в нескольких 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'х? |
document.getElementsByClassName("element") вернет массив элементов. Теперь вам надо их перебрать и повесить обработку на каждый.
|
Фраза "Теперь вам надо их перебрать и повесить обработку на каждый" меня испугала и заставила задуматься: а надо ли мне это вообще ))
Но, благо, нашёлся в интернете добрый человек, который выложил скрипт авторастяжки поля комментирования: <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> |
Обратите внимание
document.getElementsByClassName("element") document.getElementById("element") |
BETEPAH,
я указывал именно document.getElementsByClassName("element"), если Вы об этом. |
Цитата:
Вот я и обратил на окончание 's'. Оно должно в будущем вам намекать, что если есть 's', значит на выходе получается массив элементов ('Elements' в переводе с английского - 'элементЫ'). А если нет 's', значит на выходе один элемент. А вешать обработчик через онлайновый OnKeyUp="ResizeTextArea(this,2);" - это некошерно. Лучше научиться сразу отделять мух от котлет (скрипты от оформления), чем потом переучиваться. По поводу скрипта в топике, надо было пройтись по массиву вот так: var elements = document.getElementsByClassName("element"); for (var i = 0; i < elements.length; i++) { elements[i].onkeyup = //...... } только и всего. |
Да, это я затёр на тот момент безответный вопрос...
Т.е. массив будет состоять из данных со всех полей, содержащих указанный класс? Просто я думал, что сдесь class, аналогичен классам в css: где ты задаёшь свойства классу, присваиваешь элементам этот класс, и всё эти элементы наделяются свойствами, указанными в слассе. |
Цитата:
Так же как и, например, getElementsByTagName |
<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> |
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; }; }; }; закомментировал лишнее |
Часовой пояс GMT +3, время: 09:14. |