Обычно я занимаюсь серверным программированием на php, но время от времени выхожу наружу и копаюсь в верстке, стилях и яваскрипте. Недавно передо мной была поставлена задача изменять высоту textarea при вводе комментариев к различным объектам. В интернете материала по этому поводу так, сказать было не мало и не много. Первый взгляд устремился к реализованным решениям в таких крупных сетех как Вконтакте, Facebook, МойКруг. Однако, во время решения было множество препятствий и далеко не кросбраузерность.

Варианты решения были различны:
* опираться на свойства scrollHeight и offsetHeight
* вычислить кол-во используемых строк распарсив текст
* или использовать идею из выше описанных сетей.

Окончательным вариантом стало вот такое решение. Для textarea создаётся невидимый слой (div) с тойже шириной, шрифтом, размером шрифта, отступами, далее только что изменённый текст копируется в невидимый слой, у слоя узнаётся высота и эта высота устанавливается у textarea. Звучит просто, но в процессе реализации нашлось немало подводных камней.
В текущей реализации используется prototype версии 1.7, но и более ранние тоже пойдет (можно заменить на JQuery или совсем вырезать фреймворк).

Auto-size TextArea Demo

function resizeArea(text_id, minHeight, maxHeight)
{
var area = $(text_id);
var area_hidden = $(text_id + "_hidden");
var text = "";
area.value.replace(/[]/g, "_").split("\n").each(function(s) {
text = text + "" + s.replace(/\s\s/g, " ") + " "+"\n";
});
area_hidden.innerHTML = text;
var height = area_hidden.offsetHeight + 15;
height = Math.max(minHeight, height);
height = Math.min(maxHeight, height);
area.style.height = height + "px";
}

body, textarea {
font-family: Tahoma, Arial, "Nimbus Sans L", sans-serif;
font-size: 13px;
}
.text {
width:700px !important;
border:1px solid #000;
}
.text .textarea_behavior{
border:0;
width:99%;
word-wrap: break-word;
}
.text textarea{
overflow:hidden;
}
.text .comment_text_hidden{
position: relative;
}
.text #comment_text_hidden{
visibility:hidden;
position: absolute;
}

Решение может показаться кому-то очень компактным, другим наоборот безумно большим. Одно точно это единственный конечный варинта одинаково хорошо работающий на всех доступных мне браузерах (FF, Ch, Op, IE7-9).

В чем особенность подхода: нельзя просто спросить у textarea сколько места занимает текст, поэтому помещаем текст туда, где можно узнать сколько он действительно занимает места (в нашем случае интересна только высота). Вот тут то и возникает множество подводных камней. Как поместить текст из textarea в div, чтобы в точности сохранить вид и занимаемый объём текста, переносы слов, теги, множественные пробелы - вобщем всё, что в обычном тексте выглядит не так, как в html. Просто пользоваться тегом pre не удалось, т.к. приручить его оказалось сложнее.

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

• Как спрятать слой, чтоб он сохранил свои размеры и свойства. Причем нельзя делать display:none; - теряются размеры. Нельзя выкидывать блок всторону (position:absolute; left: -50000px;), т.к. размер блока задать нельзя, они не известены на момент вставки. Решение должно быть универсальным и легко встраиваемым на любую страницу.
• Обойти множество пробелов и пустых строк.
• Экранировать теги без изменения длины текста.
• Перенос непрерывного текста.

Решение приведенных проблем хорошо отражено в коде. Слой прячется совсем рядом с textarea, это позволяет не думать о задании ширины слою. Подряд несколько пробелов заменяются на пробол + . Пустые строки - (все соц сети приведенные выше используют
, но у меня не получилось). Теги экранируются очень просто: символы < и > заменяются на _. Ну и самое интересное для меня открытие, это разрыв непрерывного текста стилями word-wrap: break-word;.
Ну и самое главное в этой идеи - полное совпадение стилей слоя и textarea.

2. Вычислить кол-во используемых строк распарсив текст. Второй вариан. Это уже получше, но как выяснилось применять можно лишь установив в textarea шрифт типа Monospace, где все символы одной ширины. Только так можно добиться нормальной точности. Однако, это противоречит задумкам дизайнеров…

Приведу код для любопытных (часть функи resizeArea):

Var linecount = 1;
area.value.split("\n").each(function(s) {
linecount += Math.floor(s.length / cols) + 1;
})
area.rows = linecount;

Считаем строки и плюсуем длинные строки. Надо лишь знать параметр cols - вот как раз этого мы знать и не можем без шрифта Monospace. Если сравнить кол-во букв W и i, то в строку входит совсем разное кол-во.

Метод позволяет получать и изменять значения элементов форм. Для элементов 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~

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 à :

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.

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

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

А это прямая ссылка на сам 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"));

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

Если у вас на сайте установлена библиотека 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)

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

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

Очередной новый вариант, от 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 (как это сделать см. ниже );

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

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

/* */

Вариант 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 миллисекунд (пол секунды). Интервал можно увеличить, если наблюдаются тормоза. В вариантах, когда подсчет высоты вешается на нажатие клавиши, везде наблюдаются тормоза, особенно на слабых компах и при быстром печатание.

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

Подготовил: Александр Головко Дата публикации: 23.09.2010

Изменить дизайн textarea, реализовать стильную вертикальную полосу прокрутки.

• легкость интеграции
• кроссбраузерность
• максимальная приближенность к работе обычного textarea
  • в основе — обычный textarea
  • стандартная реакция на атрибуты name, id, disabled
  • настраиваемый вид скролла, прокрутка мышью
  • опционально возможность менять размер textarea мышью в любом браузере (как в Safari и Chrome)
• при отключенном javascript остаются обычные textarea

Для решения поставленной задачи пришлось насильно «подружить» три плагина. Это autoResize (спасибо, James Padolsey!), jScrollPane и UI resizable .

Так родился cuText 0.9.

Пример возможностей . Проверено в:

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

• autoresize.jquery.js (3.77 Kb) - плагин autoresize
• UI resizable (27.41 Kb) - можно не использовать, если нет необходимости в функции изменения размера textarea мышью
• jScrollPane.js (22.62 Kb) оригинал был изменен.
• jquery.mousewheel.min.js (2.6 Kb) для поддержки скроллинга колесиком мыши.
• cuText.js (1.98 Kb) сам плагин.
• cuText.css таблица стилей.

Подключаем библиотеки:

…и таблицу стилей:

Подразумевается, что в HTML-коде где-то есть textarea:

Инициализируем плагин cuText, например, так:

jQuery(function(){ jQuery("textarea").cuText(); });

Вот и все.

Функция cuText(), которая отвечает за инициализацию, может принимать следующие параметры:

Для всех полей с классом cuText с возможностью изменения размеров:

jQuery(function(){ jQuery(".cuText").cuText({resizable: true}); });

Поле с id="cuText" с возможностью изменения размеров, минимальными размерами, без стрелок в полосе прокрутки, ширина полосы 12px:

jQuery(function(){ jQuery("#cuText").cuText({ resizable: true, scrollbarWidth: 12, showArrows: true, minWidth: 200, minHeight: 100 }); });

Инициализировать плагин с параметром resizable: true можно только для тех textarea, для оформления которых не использовалась цельная фоновая картинка (в демо-примере это все поля, кроме шестого). Ведь при ресайзе цельный фон не потянется и верстка будет выглядеть некрасиво. Это ограничение считаю не очень существенным, так как сам ресайз у обычных textarea реализован только в некоторых браузерах, т.е. не является стандартом.

Кроме собственно jquery в демонстрационном примере подключается еще 5 js-файлов общим весом почти 60Kb. Возникает резонный вопрос, можно ли этот вес уменьшить? Да, можно. Плагин jquery-ui-1.8.custom.min.js нужен только в случае, если необходимо, чтобы пользователь мог мышью менять размер стильных textarea. Если эта функция не нужна, смело убираем данный плагин.

jScrollPane.js и jquery.mousewheel.min.js отвечают за стильную прокрутку. Понятно, что если таковая уже внедрена в проект (а как правило так и есть, то есть если используются стильные textarea, то и select, как правило, стилизован), тогда эти файлы уже подключены.

Таким образом минимальный набор дополнительно подключаемых файлов — это autoresize.jquery.js и cutext.js общим весом 5.75Kb.

Внешний вид стильного textarea определяется в cutext.css. Плагин автоматически оборачивает textarea в . В основном его стили и отвечают за вид поля:

CuTextWrap{ width:400px; background:none; color:#000; padding:3px 3px 10px 3px; /* нижний отступ больше - резервируем место для уголка ресайза */ border:1px solid #B2B2B2; -webkit-border-radius: 4px; -moz-border-radius: 4px; border-radius: 4px; position: relative; /* нужно обязательно для позиционирования границ, за которые будет тянуть пользователь */ } .cuTextWrap textarea{ width: 100%; height: 80px; /* начальная высота textarea */ display: block; overflow:hidden; border:none; background:none; color:#000; }

Поскольку полоса прокрутки формируется с помощью плагина jScrollPane, то и настройка производится так, как описано в статье jScrollPane. Делаем красивый скроллинг . Все необходимые стили вынесены в cutext.css.

Нет, не будет. Стили для textarea защищены, так как в cutext.css они все объявлены с родителем (например, .cuTextWrap .jScrollPaneContainer).

Опять-таки ничего страшного. Оригинал поменялся совершенно незначительно и его можно использовать для обычной прокрутки.

В оригинальном jScrollPane.js есть такие строки:

Switch (e.keyCode) { case 38: //up currentArrowDirection = -1; currentArrowInc = 0; whileArrowButtonDown(); currentArrowTimerArr = setInterval(whileArrowButtonDown, 100); return false; case 40: //down currentArrowDirection = 1; currentArrowInc = 0; whileArrowButtonDown(); currentArrowTimerArr = setInterval(whileArrowButtonDown, 100); return false;

Этот код, кроме всего прочего, как бы блокирует нажатия на стрелки вверх и вниз, т.е. return false не позволяет переместить курсор внутри textarea. Эти стрелки просто перемещают прокрутку. В измененном jScrollPane.js там просто стоит return true.

Да, параметров у них действительно много. Переносить их все на cuText значит неоправданно усложнить его. Если нужны тонкие настройки, открываем cutext.js, ищем вызовы нужных нам плагинов и добавляем необходимые параметры.

Да, будет. В основе будет находится тот самый textarea, который изначально помещен в HTML, со всеми своими атрибутами.

Можно. Только для вновь созданного textarea нужно сразу же проинициализировать плагин. Это может выглядеть, например, так (вставка по нажатию на элемент id="btnCreate"):

JQuery("#btnCreate").click(function() { jQuery(this).after("textarea создан на лету с помощью скрипта."); jQuery(this).next().cuText({resizable: true}); });

• Большое количество используемых скриптов при максимальном функционале плагина (с резайзом). Способ бороться — поклеить скрипты в один файл. Например, так: скачать cutext-all.min.js (42.8 Kb).