Установить значение textarea в jQuery

525

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

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

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

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

GONeale
источник
3
Если магия jQuery не работает для установки val () для <textarea>, и вы ориентируетесь по ID, скорее всего, есть несколько элементов с одинаковым идентификатором.
билликарды

Ответы:

877

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

$("textarea#ExampleMessage").val(result.exampleMessage);
enobrev
источник
5
в основном верно, хотя val требует времени, чтобы убедиться, что значение, которое вы устанавливаете, является строкой, а attr, кажется, в целом немного более волшебен.
enobrev
62
Да. Текстовая область не имеет атрибута значения, в то время как у входа есть.
MDCore
14
Согласен, но val () устанавливает его в этом случае. Они [jquery] должны определить его тип textarea и установить текст.
GONeale
17
Текстовое поле имеет свойство value (JavaScript), как и текстовый ввод. Он не имеет valueатрибута HTML , но это не имеет значения, потому что оба val()и attr('value')записывают в свойство значения JavaScript. Обратите внимание, attr()это не набор HTML - атрибуты! Он только устанавливает свойства JavaScript, пытаясь скрыть разницу для случаев, таких как class / className, где имя отличается. Но вы все равно увидите разницу для мест, где атрибут и свойство делают разные вещи, например, в элементах формы.
Бобинц
2
val(foo)у меня работает (jQuery 1.9.1). Использование text(foo)loses для обновления содержимого textarea приводит к потере разрывов строк в IE, при использовании val(foo)сохраняет их.
Тим
77

У Textarea нет атрибута value, его значение находится между тегами, т. Е. <textarea>my text</textarea>Оно не похоже на поле ввода ( <input value="my text" />). Вот почему attr не работает :)

danivalentin
источник
50

$("textarea#ExampleMessage").val() в jquery просто волшебство.

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

<textarea>blah blah</textarea>
<input type="text" value="blah blah"/>

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

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

или

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

зависит от того, хотите ли вы отобразить его в виде HTML-тегов или простого текста.

CallMeLaNN
источник
1
Вы правы, у textarea нет значения val или value, а jquery просто творит чудеса, чтобы облегчить жизнь разработчику.
Скотт Кирквуд
16
Это не называется магией, это называется абстракцией. textarea только 1 и 0, но все уровни абстракции в вашем компьютере скрывают это для вас. Можно указать на это, но, пожалуйста, не просите людей опускать другие ответы по такой причине ... :)
Espen Herseth Halvorsen
8
Остерегайтесь - html () выполняет теги сценария.
Линкольн Б
3
Из API jQuery. Метод .text () нельзя использовать для входных данных или сценариев формы. Чтобы задать или получить текстовое значение элементов input или textarea, используйте метод .val (). Чтобы получить значение элемента script, используйте метод .html (). "
пилот
20

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

$('#your_textarea_id').val('some_value');
Mik
источник
Только если вы используете селектор идентификатора. Я не могу, так как мой сторонний сгенерированный код
Джек
16

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

$("textarea#ExampleMessage").val(result.exampleMessage);
Jomit
источник
10

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

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

за

  • IE8
  • FF 3.6
  • FF4
  • Опера 11
  • Chrome 10
Мишель
источник
1
Напомним, что одной из исключительных функциональных возможностей jQuery является обеспечение совместимости с браузерами, так что да, вполне вероятно, что .val()это сделает свое дело в нескольких браузерах;)
diosney
9

На андроиде так .valи .htmlне вышло.

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

сделал работу

Дэн Очиана
источник
1
Из API jQuery. Метод .text () нельзя использовать для входных данных или сценариев формы. Чтобы задать или получить текстовое значение элементов input или textarea, используйте метод .val (). Чтобы получить значение элемента script, используйте метод .html (). "
пилот
8

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

$('#your_textarea_id').html('some_value');
Дейв
источник
3
нет, html()работает только один раз для текстовой области, в следующий раз, когда вы хотите динамически изменять содержимое textarea, html()не будет работать ...
Legionar
@ Легионар, тогда как справиться с этим делом?
Джаванд Сингх
ну, это помогло мне stackoverflow.com/questions/1219860/… используя эти функции, я просто установил закодированное значение в textarea, используя$('#textarea').val(encodedtext);
Jawand Singh
5

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

$ (textarea) .val ("некоторые html как <input type = 'text' value = '' style =" background: url ('http://www.w.com/bg.gif') repeat-x center; "/> бла бла");

или

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

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

Там пример формы:

<FORM id="idFormContact" name="nFormContact" action="send.php" method="post"  >
    <FIELDSET id="idFieldContact" class="CMainFieldset">
        <LEGEND>Test your newsletter&raquo; </LEGEND> 
        <p>Send to &agrave; : <input id='idInpMailList' type='text' value='youremail@gmail.com' /></p>
        <FIELDSET  class="CChildFieldset">
            <LEGEND>Subject</LEGEND>
            <LABEL for="idNomClient" class="CInfoLabel">Enter the subject: *&nbsp</LABEL><BR/>
          <INPUT value="" name="nSubject" type="text" id="idSubject" class="CFormInput" alt="Enter the Subject" ><BR/>
    </FIELDSET>
    <FIELDSET  class="CChildFieldset">
        <INPUT id="idBtnGen" type="button" value="Generate" onclick="onGenHtml();"/>&nbsp;&nbsp;
          <INPUT id="idBtnSend" type="button" value="Send" onclick="onSend();"/><BR/><BR/>
            <LEGEND>Message</LEGEND>
                <LABEL for="idTxtArGenHtml" class="CInfoLabel">Html code : *&nbsp</LABEL><BR/>
                <span><TEXTAREA  name="nTxtArGenHtml" id="idTxtArGenHtml" width='100%' cols="69" rows="300" alt="enter your message" ></TEXTAREA></span>
        </FIELDSET>
    </FIELDSET>
</FORM>

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

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

Окончательно решение:

function onGenHtml(){
  $('#idTxtArGenHtml').html( $("#idDivMain").html() );
  $('#idTxtArGenHtml').parent().replaceWith( '<span>'+$('#idTxtArGenHtml').parent().html()+'</span>');
}

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

Mathieua
источник
5

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

<textarea value="someString">

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

<textarea>someString</textarea>

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

<textarea value="someString">someOLDString</textarea>.

попробуй $("#textareaid").val()или $("#textareaid").innerHTMLвзамен.

Лука Рамишвили
источник
5

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

$("textarea#ExampleMessage").html(result.exampleMessage);
psoni
источник
2
нет, html()работает только один раз для текстовой области, в следующий раз, когда вы хотите динамически изменять содержимое textarea, html()не будет работать ...
Legionar
и если вы сделали .empty (). html ('newContent') @Legionar?
В.Х.
3

Это работает для меня .... Я построил стену фейсбук ...

Вот основа моего кода:

// SETS MY TEXT AREA TO EMPTY (NO VALUE)
$('textarea#message_wall').val('');
Эдгар Виллегас Альварадо
источник
3

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

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

Вот рабочий JSFiddle: https://jsfiddle.net/w7b1thgw/2/

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(); 
    });
    
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<textarea id="dynamic_html"></textarea>
<a id="google_html" class="load_html" href="#" data-my_html="&lt;a href=&quot;google.com&quot;&gt;google.com&lt;/a&gt;">Google HTML</a>
<a id="yahoo_html" class="load_html" href="#" data-my_html="&lt;a href=&quot;yahoo.com&quot;&gt;yahoo.com&lt;/a&gt;">Yahoo HTML</a>
<a id="clear_html" href="#">Clear HTML</a>

sMyles
источник
2

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

$('#message').blur(function() {    
    if (this.value == '') { this.value = msg_greeting; }
});
Antony
источник
2

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

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

Проверьте пример здесь: http://www.codegateway.com/2012/03/set-value-to-textarea-jquery.html

Авинаш
источник
2

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

$("textarea#samplID").val()
С.Мохамед Махди Ахмадиан Заде
источник
2

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

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

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

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

$('.some-text-area')[0].value = 'test';
user2846569
источник
1

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

$(document).ready(function() {
  $("#my_form textarea").val('');
});
pdub23
источник
pdub23, всегда лучше комментировать принятый ответ, чем создавать новый ответ ...
Фабио Батиста
1

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

$("textarea#ExampleMessage").append(result.exampleMessage);
shyamshyre
источник
1

Когда у меня был 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');
МакГайвер
источник
1

Я использовал $(textarea).val/html/text(any_str_var)все, что работало для меня. Если вы хотите быть уверены, что ваша переменная в виде строки добавлена ​​в текстовую область, вы всегда можете выполнить конкататацию так:

$(textarea).val(unknown_var + '')

Метод .val () определенно используется в textarea - см .: https://api.jquery.com/val/

.html () может использоваться для получения или установки содержимого любого элемента - см .: https://api.jquery.com/html/#html2

.text () - это то же самое, что и .html, за исключением того, что его можно использовать для установки содержимого XML: см. https://api.jquery.com/text/#text-text

Вы также можете прочитать больше о том, как каждый действует на специальных символов с каждой из этих ссылок.

Пол Маккормак
источник
0

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

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

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

Саймон
источник
0

Это работает:

var t = $('#taCommentSalesAdministration');
t.val('Hi');

Помните, что здесь важно убедиться, что вы используете правильный ID. И прежде чем использовать ID, убедитесь, что вы поставили #перед ним.

ADL
источник
0

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

Например:

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

user306265
источник
0

Я пытался установить значение / text / html с помощью JQuery, но не удалось. Поэтому я попробовал следующее.

В этом случае я вставлял новый элемент textarea в созданный DOM.

 var valueToDisplay= 'Your text here even with line breaks';
 var textBox = '<textarea class="form-control" >'+ valueToDisplay +'</textarea>';
 $(td).html(textBox);

введите описание изображения здесь

Peck_conyon
источник