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


525

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

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

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

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


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

Ответы:


877

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

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

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 не работает :)


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-тегов или простого текста.


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

Только если вы используете селектор идентификатора. Я не могу, так как мой сторонний сгенерированный код
Джек

16

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

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

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-код в текстовую область.


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

2
нет, html()работает только один раз для текстовой области, в следующий раз, когда вы хотите динамически изменять содержимое textarea, html()не будет работать ...
Legionar

и если вы сделали .empty (). html ('newContent') @Legionar?
В.Х.


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>


2

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

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

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

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

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

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

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

$('.some-text-area')[0].value = 'test';

1

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

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

pdub23, всегда лучше комментировать принятый ответ, чем создавать новый ответ ...
Фабио Батиста

1

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

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

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, убедитесь, что вы поставили #перед ним.


0

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

Например:

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


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

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

Используя наш сайт, вы подтверждаете, что прочитали и поняли нашу Политику в отношении файлов cookie и Политику конфиденциальности.
Licensed under cc by-sa 3.0 with attribution required.