Автоизменение высоты textarea при вводе текста. Автоматическое растягивание textarea на javascript и jQuery

Подготовил: Александр Головко Дата публикации: 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() Примеры инициализации

Для всех полей с классом 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 реализован только в некоторых браузерах, т.е. не является стандартом.

Немного подробнее про подключаемые *.js

Кроме собственно 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?

Внешний вид стильного 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.

А я уже использую в своей верстке jScrollPane. Не будет ли конфликта стилей?

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

Я уже использую в своей верстке jScrollPane. А в описании плагина указано «jScrollPane.js (22.62 Kb) оригинал был изменен». Как разрулить эту ситуацию?

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

В оригинальном 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.

В плагинах jScrollPane, autoresize и jQuery UI:: resizable есть ряд более тонких настроек поведения. Они не попали в список параметров cuText, а я хочу их использовать! Как быть?

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

Мне нужно использовать атрибуты в HTML чтобы задать для textarea id, name, disabled, tabindex и прочее. Будет ли это все работать после воздействия плагина?

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

Можно ли добавлять стильные textarea динамически?

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

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

Баги/недостатки плагина

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

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

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

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");

Просто используйте 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")

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

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

Текстовая область не имеет значения. 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 закодированного 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

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

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

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

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

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

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

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

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

Например:

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

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

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

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

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

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

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

• FF 3.6
• Опера 11
• Chrome 10

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

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

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();

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

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

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

Там проблема: мне нужно сгенерировать 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-код в текстовое поле.

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

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

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