Автоизменение высоты 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); }); });
JQueryjQuery делает смехотворно длинные команды JavaScript как getElementByHerpDerp более короткие и кросс-браузерные.
AngularJSAngularJS позволяет создавать собственные 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"); }