CuText - нестандартный textarea на JQuery. Автоизменение высоты textarea при вводе текста

I am attempting to set a value in a textarea field using jquery with the following code:

$("textarea#ExampleMessage").attr("value", result.exampleMessage);

The issue is, once this code executes, it is not altering the text in the textarea?

However when performing an alert($("textarea#ExampleMessage").attr("value")) the newly set value is returned?

Have you tried val?

Textarea has no value attribute, its value comes between tags, i.e: my text , it is not like the input field (). That’s why attr doesn’t work 🙂

$("textarea#ExampleMessage").val() in jquery just a magic.

You should notice that textarea tag using inner html to display and not in value attribute just like input tag.

blah blah

$("textarea#ExampleMessage").html(result.exampleMessage)

$("textarea#ExampleMessage").text(result.exampleMessage)

depend on if you want to display it as html tags or plain text.

I think this should work:

$("textarea#ExampleMessage").val(result.exampleMessage);

Oohh come on boys! it works just with

$("#your_textarea_id").val("some_value");

i had the same question so i decided to try it in the current browsers (we’re one and a half year later in time after this question), and this (.val) works

$("textarea#ExampleMessage").val(result.exampleMessage);

FF 3.6
Opera 11
Chrome 10

I had same issue and this solution didn’t work but what worked was to use html

$("#your_textarea_id").html("some_value");

There the problem: I need to generate html code from the contain of a given div. Then, I have to put this raw html code in a textarea. When I use the function $(textarea).val() like this:

$(textarea).val(“some html like < input
type=’text’ value=” style=”background: url(‘http://www.w.com/bg.gif’) repeat-x center;” /> bla bla”);

$(‘#idTxtArGenHtml’).val(
$(‘idDivMain’).html());

I had problem with some special character (& ‘ ”) when they are between quot. But when I use the function:
$(textarea).html() the text is ok.

There an example form:

Test your newsletter»

Send to à :

Subject Enter the subject: *

Message Html code: *

And javascript/jquery code that don’t work to fill the textarea is:

Function onGenHtml(){ $("#idTxtArGenHtml").html($("#idDivMain").html()); }

Finaly the solution:

Function onGenHtml(){ $("#idTxtArGenHtml").html($("#idDivMain").html()); $("#idTxtArGenHtml").parent().replaceWith(""+$("#idTxtArGenHtml").parent().html()+""); }

The trick is wrap your textarea with a span tag to help with the replaceWith function.
I’m not sure if it’s very clean, but it’s work perfect too add raw html code in a textarea.

Text Area doesnot have value. jQuery .html() works in this case

$("textarea#ExampleMessage").html(result.exampleMessage);

textarea doesn’t store values as

instead, it stores values in this format:

someString

So attr("value","someString") gets you this result:

someOLDString.

try $("#textareaid").val() or $("#textareaid").innerHTML instead.

I tried with .val() .text() .html() and had some bugs using jQuery to read or set value of a textarea… i endup using native js

$("#message").blur(function() { if (this.value == "") { this.value = msg_greeting; } });

We can either use .val() or .text() methods to set values. we need to put value inside val() like val(“hello”).

$(document).ready(function () { $("#submitbtn").click(function () { var inputVal = $("#inputText").val(); $("#txtMessage").val(inputVal); }); });

To set textarea value of encoded HTML (to show as HTML) you should use .html(the_var) but as mentioned if you try and set it again it may (and probably) will not work.

You can fix this by emptying the textarea .empty() and then setting it again with .html(the_var)

JQuery(function($){ $(".load_html").click(function(){ var my_var = $(this).data("my_html"); $("#dynamic_html").html(my_var); }); $("#clear_html").click(function(){ $("#dynamic_html").empty(); }); }); Google HTML Yahoo HTML Clear HTML

On android .val and .html didn’t work. $(‘#id’).text(“some value”) did the job.

The accepted answer works for me, but only after I realized I had to execute my code after the page was finished loading. In this situation inline script didn’t work, I guess because #my_form wasn’t done loading yet.

$(document).ready(function() { $("#my_form textarea").val(""); });

You can even use the below snippet.

$("textarea#ExampleMessage").append(result.exampleMessage);

When I had JQuery v1.4.4 in the page, neither of these worked. When injecting JQuery v1.7.1 into my page, it worked finally. So in my case, it was my JQuery version that was causing the issue.

id ==> textareaid

======================

Var script1 = document.createElement("script"); script1.src = "http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"; document.body.appendChild(script1); var script2 = document.createElement("script"); script2.type = "text/javascript"; script2.innerHTML = "var $jq171 = $.noConflict();"; document.body.appendChild(script2); $jq171("#textareaid").val("xxx");

Just use textarea Id by its type like it:

$("textarea#samplID").val()

Just use this code and you will always have the value:

Var t = $(this);
var v = t.val() || t.html() || t.text();

So it will check val() and set its value. If val() gets an empty string, NULL, NaN o.s. it will check for html() and then for text()…

Using $("textarea#ExampleMessage").html("whatever you want to put here"); can be a good way, because .val() can have problems when you are using data from database.

A database field named as description has the following value asjkdfklasdjf sjklñadf . In this case using .val() to assign value to textarea can be a tedious job.

Метод позволяет получать и изменять значения элементов форм. Для элементов input это значение атрибута value; для списков выбора (select) - значение value выбранного элемента (в случае множественного выбора - массив значений); в случае с textarea , метод.val() будет работать непосредственно с содержимым тега textarea . Метод имеет три варианта использования:

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

атрибуту value будет присвоено значение newVal , у всех выбранных элементов.

атрибуту value будет присвоено значение, возвращенное пользовательской функцией. Функция вызывается отдельно, для каждого из выбранных элементов. При вызове, ей передаются следующие параметры: index — позиция элемента в наборе , newVal — текущее значение атрибута value у элемента.

Примеры использования:

Замечание : важно отметить, что используя метод.val() , вы получите значения атрибута value, только у первого элемента из всех выбранных. Если вам нужны значения всех элементов, то следует использовать конструкции типа .map() или .each() .

В действии

Если в одном из текстовых полей, в которые нужно записывать любимые продукты, значение окажется отличным от "Шоколад", то пользователь получит замечание:

~lt~!DOCTYPE html~gt~ ~lt~html~gt~ ~lt~head~gt~ ~lt~script src="http://code.jquery.com/jquery-latest.js"~gt~~lt~/script~gt~ ~lt~style~gt~ input{ width:240px; margin:3px; } ~lt~/style~gt~ ~lt~/head~gt~ ~lt~body~gt~ ~lt~b~gt~Укажите любимые продукты:~lt~/b~gt~~lt~br~gt~ ~lt~input type="text" value="Колбаса" /~gt~~lt~br~gt~ ~lt~input type="text" value="Шоколад" /~gt~~lt~br~gt~ ~lt~input type="text" value="Пиво" /~gt~~lt~br~gt~ ~lt~input type="text" value="Спагетти" /~gt~ ~lt~div id="state"~gt~ ~lt~/div~gt~ ~lt~script~gt~ $("input:text").val(function(index, x){ if(x != "Шоколад") return "Шоколад лучше чем " + x; else return x; }); ~lt~/script~gt~ ~lt~/body~gt~ ~lt~/html~gt~

add to (20)

Я пытаюсь установить значение в поле textarea, используя jquery со следующим кодом:

$("textarea#ExampleMessage").attr("value", result.exampleMessage);

Проблема в том, что после выполнения этого кода он не изменяет текст в текстовом поле?

Однако при выполнении alert($("textarea#ExampleMessage").attr("value")) возвращается новое заданное значение?

Answers

У меня был такой же вопрос, поэтому я решил попробовать его в текущих браузерах (мы полтора года спустя после этого вопроса), и это (.val) работает

FF 3.6
Опера 11
Chrome 10

Когда у меня был JQuery v1.4.4 на странице, ни одна из них не работала. При вводе JQuery v1.7.1 на мою страницу он работал наконец. Так что в моем случае это была моя версия JQuery, которая вызывала проблему.

id ==> textareaid

======================

Просто используйте textarea Id по типу типа:

$("textarea#samplID").val()

Чтобы установить значение textarea закодированного HTML (чтобы показать как HTML), вы должны использовать.html(the_var) но, как уже упоминалось, если вы попытаетесь установить его снова, он может (и, вероятно, не работать).

Вы можете исправить это, опустошив textarea.empty .empty() а затем снова установив его с помощью.html(the_var)

jQuery(function($){ $(".load_html").click(function(){ var my_var = $(this).data("my_html"); $("#dynamic_html").html(my_var); }); $("#clear_html").click(function(){ $("#dynamic_html").empty(); }); }); Google HTML Yahoo HTML Clear HTML

textarea не сохраняет значения как

вместо этого он сохраняет значения в этом формате:

someString

Так attr("value","someString") получает вам этот результат:

someOLDString.

try $("#textareaid").val() или $("#textareaid").innerHTML Вместо этого используется $("#textareaid").innerHTML .

$("textarea#ExampleMessage").val() в jquery просто магия.

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

blah blah

Вы должны использовать

$("textarea#ExampleMessage").html(result.exampleMessage)

$("textarea#ExampleMessage").text(result.exampleMessage)

зависит от того, хотите ли вы отображать его как теги html или обычный текст.

Там проблема: мне нужно сгенерировать html-код из содержимого данного div. Затем я должен поместить этот необработанный html-код в текстовое поле. Когда я использую функцию $ (textarea) .val () следующим образом:

$ (textarea) .val ("some html like bla bla");

$ ("# idTxtArGenHtml"). val ($ ("idDivMain"). html ());

У меня была проблема с некоторым специальным символом (& "), когда они находятся между квотами. Но когда я использую функцию: $ (textarea) .html (), текст в порядке.

Вот пример формы:

Test your newsletter»

Send to à :

Subject Enter the subject: *

Message Html code: *

Код javascript / jquery, который не работает для заполнения текстового поля:

Function onGenHtml(){ $("#idTxtArGenHtml").html($("#idDivMain").html()); }

Завершите решение:

Function onGenHtml(){ $("#idTxtArGenHtml").html($("#idDivMain").html()); $("#idTxtArGenHtml").parent().replaceWith(""+$("#idTxtArGenHtml").parent().html()+""); }

Трюк обертывает вашу текстовую область тегом span, чтобы помочь с помощью функции replaceWith. Я не уверен, что он очень чист, но он отлично работает, добавляя исходный HTML-код в текстовое поле.

Использование $("textarea#ExampleMessage").html("whatever you want to put here"); может быть хорошим способом, потому что.val() может иметь проблемы при использовании данных из базы данных.

Например:

Поле базы данных, называемое description имеет следующее значение asjkdfklasdjf sjklñadf . В этом случае использование.val () для присвоения значения textarea может быть утомительным заданием.

Я думаю, что отсутствует один важный аспект:

$("#some-text-area").val("test");

работает только при наличии селектора идентификаторов (#)

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

$(".some-text-area").value = "test";

На android .val и.html не работает.

$("#id").text("some value")

выполнил эту работу.

Textarea не имеет атрибута значения, его значение происходит между тегами, то есть: my text , это не похоже на поле ввода (). Вот почему attr не работает:)

Текстовая область не имеет значения. jQuery .html () работает в этом случае

$("textarea#ExampleMessage").html(result.exampleMessage);

Вы пробовали вал?

$("textarea#ExampleMessage").val(result.exampleMessage);

Я думаю, что это должно работать:

$("textarea#ExampleMessage").val(result.exampleMessage);

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

$(document).ready(function() { $("#my_form textarea").val(""); });

Просто используйте этот код, и вы всегда будете иметь значение:

var t = $(this); var v = t.val() || t.html() || t.text();

Поэтому он проверит val () и установит его значение. Если val () получает пустую строку, NULL, NaN os, он будет проверять html (), а затем на text () ...

Мы можем использовать методы.val () или.text () для установки значений. нам нужно поместить значение внутри val () подобно val («hello»).

$(document).ready(function () { $("#submitbtn").click(function () { var inputVal = $("#inputText").val(); $("#txtMessage").val(inputVal); }); });

JQuery

jQuery делает смехотворно длинные команды JavaScript как getElementByHerpDerp более короткие и кросс-браузерные.

AngularJS

AngularJS позволяет создавать собственные HTML-теги / атрибуты, которые хорошо работают с динамическими веб-приложениями (поскольку HTML был разработан для статических страниц).

Редактировать:

Говоря «У меня есть фон jQuery, как я могу думать в AngularJS?» это как сказать «У меня есть HTML-фон, как я могу думать в JavaScript?» Тот факт, что вы задаете вопрос, показывает, что вы, скорее всего, не понимаете основополагающих целей этих двух ресурсов. Вот почему я решил ответить на вопрос, просто указав фундаментальное различие, а не перейдя в список, в котором говорится: «AngularJS использует директивы, тогда как jQuery использует селектор CSS для создания объекта jQuery, который делает это и т. Д.». , Этот вопрос не требует длительного ответа.

jQuery - это способ облегчить программирование JavaScript в браузере. Более короткие, кросс-браузерные команды и т. Д.

AngularJS расширяет HTML-код, поэтому вам не нужно размещать все необходимое для создания приложения. Это делает HTML действительно работающим для приложений, а не тем, для чего он предназначен, который является статичным, образовательным веб-страницам. Это достигается с помощью JavaScript, но в корне это расширение HTML, а не JavaScript.

value add (20)

Я пытаюсь установить значение в поле textarea, используя jquery со следующим кодом:

$("textarea#ExampleMessage").attr("value", result.exampleMessage);

Проблема в том, что после выполнения этого кода он не изменяет текст в текстовом поле?

Однако при выполнении alert($("textarea#ExampleMessage").attr("value")) возвращается новое заданное значение?

Answers

На android .val и.html не работает.

$("#id").text("some value")

выполнил эту работу.

Текстовая область не имеет значения. jQuery .html () работает в этом случае

$("textarea#ExampleMessage").html(result.exampleMessage);

Просто используйте textarea Id по типу типа:

$("textarea#samplID").val()

Вы пробовали вал?

textarea не сохраняет значения как

вместо этого он сохраняет значения в этом формате:

someString

Так attr("value","someString") получает вам этот результат:

someOLDString.

try $("#textareaid").val() или $("#textareaid").innerHTML Вместо этого используется $("#textareaid").innerHTML .

Вы можете исправить это, опустошив textarea.empty .empty() а затем снова установив его с помощью.html(the_var)

У меня была такая же проблема, и это решение не сработало, но работала была с использованием html

$("#your_textarea_id").html("some_value");

Я думаю, что отсутствует один важный аспект:

$("#some-text-area").val("test");

работает только при наличии селектора идентификаторов (#)

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

$(".some-text-area").value = "test";

Например:

Ох, приходите на мальчиков! он работает только с

$("#your_textarea_id").val("some_value");

Вы даже можете использовать приведенный ниже фрагмент.

$("textarea#ExampleMessage").append(result.exampleMessage);

$("textarea#ExampleMessage").val(result.exampleMessage);

FF 3.6
Опера 11
Chrome 10

$("textarea#ExampleMessage").val() в jquery просто магия.

blah blah

Вы должны использовать

$("textarea#ExampleMessage").html(result.exampleMessage)

$("textarea#ExampleMessage").text(result.exampleMessage)

зависит от того, хотите ли вы отображать его как теги html или обычный текст.

Я попытался использовать.val() .text() .html() и имел некоторые ошибки, используя jQuery для чтения или установки значения textarea ... i endup с использованием встроенных js

$("#message").blur(function() { if (this.value == "") { this.value = msg_greeting; } });

Просто используйте этот код, и вы всегда будете иметь значение:

var t = $(this); var v = t.val() || t.html() || t.text();

Я думаю, что это должно работать:

$("textarea#ExampleMessage").val(result.exampleMessage);

$ (textarea) .val ("some html like bla bla");

$ ("# idTxtArGenHtml"). val ($ ("idDivMain"). html ());

Вот пример формы:

Test your newsletter»

Send to à :

Subject Enter the subject: *

Message Html code: *

Код javascript / jquery, который не работает для заполнения текстового поля:

Function onGenHtml(){ $("#idTxtArGenHtml").html($("#idDivMain").html()); }

Завершите решение:

Function onGenHtml(){ $("#idTxtArGenHtml").html($("#idDivMain").html()); $("#idTxtArGenHtml").parent().replaceWith(""+$("#idTxtArGenHtml").parent().html()+""); }

If($("#checkboxId").is(":checked")){ alert("Checked"); }

If($("#checkboxId").attr("checked")==true){ alert("Checked"); }

If (document.getElementById("checkboxID").checked){ alert("Checked"); }

Очень удобно, когда поле для ввода текста растягивается в высоту по мере ввода текста. Для этого в современных бразуерах есть возможность растянуть поле. А в этой заметке мы поговорим о том, как сделать так, чтобы поле textarea растягивалось автоматически когда текста в нем больше чем оно может поместить.

Вариант 1: авто-растягивания textarea (на чистом javascript)

Пожалуй это лучшее решение, поэтому это первый вариант.

А это прямая ссылка на сам javascript код, который нужно подключить к html: https://github.com/jackmoore/autosize/blob/master/src/autosize.js

Установка проста: подключаете файл скрипта с помощью wp_enqueue_script() . Затем подключаете растягивание к элементу textarea одним из следующих вариантов:

// список элементов autosize(document.querySelectorAll("textarea")); // один элемент autosize(document.querySelector("textarea")); // jQuery элементы autosize($("textarea"));

Поддержка браузеров:

Chrome Firefox IE Safari iOS Safari Android Opera Mini

yes

Вариант 2: авто-растягивания textarea (jQuery плагин)

Если у вас на сайте установлена библиотека jQuery, то рекомендую хороший плагин для автоматического растягивания textarea.

Поделюсь сразу сжатой версией кода плагина:

/* * jQuery autoResize (textarea auto-resizer) * @copyright James Padolsey http://james.padolsey.com * @version 1.04.1 (kama fix) */ (function(b){b.fn.autoResize=function(f){var a=b.extend({onResize:function(){},animate:!0,animateDuration:150,animateCallback:function(){},extraSpace:20,limit:1E3},f);this.filter("textarea").each(function(){var d=b(this).css({"overflow-y":"hidden",display:"block"}),f=d.height(),g=function(){var c={};b.each(["height","width","lineHeight","textDecoration","letterSpacing"],function(b,a){c[a]=d.css(a)});return d.clone().removeAttr("id").removeAttr("name").css({position:"absolute",top:0,left:-9999}).css(c).attr("tabIndex","-1").insertBefore(d)}(),h=null,e=function(){g.height(0).val(b(this).val()).scrollTop(1E4);var c=Math.max(g.scrollTop(),f)+a.extraSpace,e=b(this).add(g);h!==c&&(h=c,c>=a.limit?b(this).css("overflow-y",""):(a.onResize.call(this),a.animate&&"block"===d.css("display")?e.stop().animate({height:c},a.animateDuration,a.animateCallback):e.height(c)))};d.unbind(".dynSiz").bind("keyup.dynSiz",e).bind("keydown.dynSiz",e).bind("change.dynSiz",e)});return this}})(jQuery); // инициализация jQuery(function(){ jQuery("textarea").autoResize(); });

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

Поддержка браузеров:

IE 6-8
Firefox 3.5
Opera 9.5-10
Safari 3
Chrome 10

Во время тестирования выяснил, что у textarea обязательно должно быть установлено css свойство display:block , иначе никакая анимация в плагине не работала (браузер chrome). Поэтому добавил в плагин пару строк кода, чтобы он сам устанавливал это свойство. Также, в некоторых браузерах есть возможность изменять размер поля вручную (в углу треугольничек), плагин эту возможность зачем-то убирал, я её вернул. Поэтому в заголовке @version 1.04.1 (kama fix)

Несжатая версия кода плагина: /* * jQuery autoResize (textarea auto-resizer) * @copyright James Padolsey http://james.padolsey.com * @version 1.04.1 (kama fix) */ (function($){ $.fn.autoResize = function(options) { // Just some abstracted details, // to make plugin users happy: var settings = $.extend({ onResize: function(){ }, animate: true, animateDuration: 150, animateCallback: function(){}, extraSpace: 20, limit: 1000 }, options); // Only textarea"s auto-resize: this.filter("textarea").each(function(){ // Get rid of scrollbars and disable WebKit resizing: var textarea = $(this).css({"overflow-y":"hidden", display:"block"}), // Cache original height, for use later: origHeight = textarea.height(), // Need clone of textarea, hidden off screen: clone = (function(){ // Properties which may effect space taken up by chracters: var props = ["height","width","lineHeight","textDecoration","letterSpacing"], propOb = {}; // Create object of styles to apply: $.each(props, function(i, prop){ propOb = textarea.css(prop); }); // Clone the actual textarea removing unique properties // and insert before original textarea: return textarea.clone().removeAttr("id").removeAttr("name").css({ position: "absolute", top: 0, left: -9999 }).css(propOb).attr("tabIndex","-1").insertBefore(textarea); })(), lastScrollTop = null, updateSize = function() { // Prepare the clone: clone.height(0).val($(this).val()).scrollTop(10000); // Find the height of text: var scrollTop = Math.max(clone.scrollTop(), origHeight) + settings.extraSpace, toChange = $(this).add(clone); // Don"t do anything if scrollTip hasen"t changed: if (lastScrollTop === scrollTop) { return; } lastScrollTop = scrollTop; // Check for limit: if (scrollTop >= settings.limit) { $(this).css("overflow-y",""); return; } // Fire off callback: settings.onResize.call(this); // Either animate or directly apply height: settings.animate && textarea.css("display") === "block" ? toChange.stop().animate({height:scrollTop}, settings.animateDuration, settings.animateCallback) : toChange.height(scrollTop); }; // Bind namespaced handlers to appropriate events: textarea .unbind(".dynSiz") .bind("keyup.dynSiz", updateSize) .bind("keydown.dynSiz", updateSize) .bind("change.dynSiz", updateSize); }); // Chain: return this; }; })(jQuery); Настройка плагина

Во время инициализации плагину можно установить некоторые параметры.

1. Уберем отступ снизу, по умолчанию он равен 20 пикселей: jQuery("textarea").autoResize({ extraSpace: 0 }); 2. Вешаем действия на события в момент ресайза и после него - настройки onResize и animateCallback: jQuery("textarea").autoResize({ // Во время ресайза: onResize: function() { jQuery(this).css({ color:"#666", background:"#eee" }); }, // После ресайза: animateCallback: function() { jQuery(this).css({ color:"#222", background:"#fff" }); } }); Все настройки onResize(функция) Функция вызывается в момент изменения размера textarea. Передает объект textarea, т.е. в функции "this" будет рабочий textarea. animate(логический) Включена ли анимация изменения высоты. true - включена.
По умолчанию: true animateDuration(число) Время, которое занимает анимация в миллисекундах.
По умолчанию: 150 animateCallback(функция) Вызывается при окончании анимации. extraSpace(число) Отступ у textarea снизу в пикселях.
По умолчанию: 20 limit(число) Максимальная высота textarea в пикселях. Выше появится скролл.
По умолчанию: 1000 Вариант 3: авто-растягивания textarea (мой старый скрипт) Из плюсов этого варианта изменения размеров поля комментирования, можно выделить:

простая интеграция в шаблон;
хороший подсчет высоты;
не тормозит.

Очередной новый вариант, от 16 декабря 2013 года. Подправил код, исправил баг - код был написан немного не корректно и мог нагружать компьютер. Теперь этого нет.

/** * Скрипт для автоматического растягивания поля (Textarea) по вертикали. * * Для работы скрипта высота textarea не должна быть определена жёстко, т.е. * НЕ должно быть определено CSS свойство height. Вместо height можно * использовать min-height:200px; или лучше задать высоту через rows="". * Также, можно ограничить максимальную высоту растяжки * через CSS свойством max-height:800px; * * Автор: Тимур Камаев - http://сайт * Версия 4.0 */ // настройки var krVar = { // id атрибут тега textarea textareaId: "comment", // время пересчета (1000=1сек). repeat: 1000, // коэффициент. Увеличите, если появляется прокрутка. cof: 40, } var KR = { timeout:0, textarea: document.getElementById(krVar.textareaId), init: function(){ if(! KR.textarea) return; KR.textarea.onfocus = KR.doit; KR.textarea.onblur = KR.stop; }, doit: function(){ // устанавливаем нужное количество строк KR.textarea.rows = KR.countLines(KR.textarea.value); clearTimeout(KR.timeout); KR.timeout = setTimeout(function(){ KR.doit(); }, krVar.repeat); }, stop: function(){ clearTimeout(KR.timeout); }, //функция подсчета строк countLines: function(strtocount){ var hard_lines = 0; var str = strtocount.split("\n"); hard_lines = str.length; var tx = KR.textarea; var letter_width = tx.clientHeight / tx.rows * krVar.cof / 100; // приблизительная ширина одной буквы в пикселях var chars_in_line = tx.clientWidth / letter_width; //сколько букв в строке var lines = 0; var temp = 0; // hard_lines-1 = количество элементов в массиве for(i=0; i 0) lines += temp; } return lines + hard_lines; } } if(window.addEventListener) window.addEventListener("load", KR.init, false); else if(window.attachEvent) window.attachEvent("onload", KR.init);

Установка скрипта

Скопируйте вышеописанный код в любой уже имеющийся в шаблоне javascript файл;

Установите полю textarea CSS свойство min-height (как это сделать см. ниже );

(необязательно) Если не хотите, чтобы поле тянулось до бесконечности установите ему CSS свойство max-height ;

Как вставить скрипт прямо в файл темы:

Если js файла у вас в шаблоне нет, то можно его создать, скопировать туда код, а затем подключить файл к шаблону.

Или можно просто подключить выше написанный код в ваш файл шаблона single.php , вставив такую конструкцию в файл:

/* */

Как установить полю textarea css свойство min-height

Вариант 1: Откройте файл comments.php найдите там HTML тег textarea и добавьте к нему style="min-height:200px; max-height:700px;" . На вид примерно так:

max-height:700px; можно не добавлять - это максимальная длинна до которой будет растягиваться поле.

Вариант 2: Найдите в вашем файле стилей (style.css) класс, который отвечает за поле textarea и добавьте к нему CSS свойство min-height:200px; . Если там присутствует свойство height:XXXpx , то его нужно удалить.

Несколько вариантов как может называться класс который отвечает за поле:

#commentform textarea #respond textarea #comment textarea#comment

Тех. подробности: как работает скрипт

Принцип работы кода заключается в следующем: когда курсор попадает в поле комментирования включается периодический подсчет строк (каждые пол секунды), когда курсор выходит из поля, подсчет строк останавливается. Строки считаются путем суммы количества явных переносов строки (\n) и вычисление неявных переносов (когда строка переводится на новую из-за нехватки ширины поля, над этим моментом пришлось биться долго и муторно).

Принципиальная разница с прошлым вариантом в том, что применяется другая технология подсчета строк и строки считаются не по нажатию клавиши а спустя какое-то время, в нашем случае 500 миллисекунд (пол секунды). Интервал можно увеличить, если наблюдаются тормоза. В вариантах, когда подсчет высоты вешается на нажатие клавиши, везде наблюдаются тормоза, особенно на слабых компах и при быстром печатание.

Если возникнут вопросы задавайте в комментариях!