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

477

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

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

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

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

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

23 ответа

758
Лучший ответ

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

$("textarea#ExampleMessage").val(result.exampleMessage);
  • 0
    Я думаю, что делает то же самое, что и attr («значение»);
  • 5
    в основном это правда, хотя val требует времени, чтобы убедиться, что значение, которое вы устанавливаете, является строкой, а attr, кажется, в целом немного больше волшебства.
Показать ещё 10 комментариев
65

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

43

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

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

<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 просто творит чудеса, чтобы облегчить жизнь разработчику.
  • 14
    Это не называется магией, это называется абстракцией. textarea - только 1 и 0, но все уровни абстракции в вашем компьютере скрывают это для вас. Можно указать на это, но, пожалуйста, не просите людей занижать другие ответы по такой причине ... :)
Показать ещё 2 комментария
13

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

$('#your_textarea_id').val('some_value');
13

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

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

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

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

для

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

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

$('#your_textarea_id').html('some_value');
  • 3
    нет, html() работает только один раз для textarea, в следующий раз, когда вы захотите динамически изменить содержимое textarea , html() не будет работать ...
  • 0
    @ Легионар, тогда как справиться с этим делом?
Показать ещё 1 комментарий
7

На android .val и .html не работает.

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

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

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

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

$(textarea).val( "some html like < input type = 'text' value = '' style =" background: url ('http://www.w.com/bg.gif') repeat-x center; "/" > bla bla ");

или

$( '# idTxtArGenHtml'). Вал ( $('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='[email protected]' /></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-код в текстовое поле.

4

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

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

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

<textarea value="someString">

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

<textarea>someString</textarea>

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

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

попробуйте $("#textareaid").val() или $("#textareaid").innerHTML.

2

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

Вы можете исправить это, опустошив textarea .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() для установки значений. нам нужно поместить значение внутри val() подобно val ( "hello" ).

  $(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

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

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

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

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

// SETS MY TEXT AREA TO EMPTY (NO VALUE)
$('textarea#message_wall').val('');
1

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

$("textarea#samplID").val()
  • 0
    Спасибо, что нашли время прояснить свой ответ. +1 за это
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

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

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

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

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

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

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

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

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

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

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

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

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

0

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

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

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

0

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

Например:

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

Ещё вопросы

Сообщество Overcoder
Наверх
Меню