Установить значение textarea в jQuery
Я пытаюсь установить значение в поле textarea с помощью jquery со следующим кодом:
$("textarea#ExampleMessage").attr("value", result.exampleMessage);
проблема в том, что после выполнения этого кода он не изменяет текст в текстовом поле?
однако при проведении alert($("textarea#ExampleMessage").attr("value"))
возвращается вновь установленное значение?
23 ответов
Textarea не имеет атрибута value, его значение находится между тегами, i.e:<textarea>my text</textarea>
, Это не похоже на поле ввода (<input value="my text" />
). Вот почему attr не работает:)
$("textarea#ExampleMessage").val()
в jquery просто магия.
вы должны заметить, что textarea тег с помощью внутренний html для отображения и не в значение атрибута как тег input.
<textarea>blah blah</textarea>
<input type="text" value="blah blah"/>
вы должны использовать
$("textarea#ExampleMessage").html(result.exampleMessage)
или
$("textarea#ExampleMessage").text(result.exampleMessage)
зависит от того, хотите ли вы отобразить его в виде тегов html или обычного текста.
у меня был тот же вопрос, поэтому я решил попробовать его в текущих браузерах (мы через полтора года после этого вопроса), и это (.val
) работает
$("textarea#ExampleMessage").val(result.exampleMessage);
на
- IE8
- FF 3.6
- FF4
- Опера 11
- Chrome 10
У меня была такая же проблема, и это решение не сработало, но то, что сработало, было использовать html
$('#your_textarea_id').html('some_value');
там проблема: мне нужно создать html-код из содержимого данного div. Затем я должен поместить этот необработанный html-код в текстовое поле. Когда я использую функцию $(текста).функция val() такой :
$(textarea).val ("некоторый html как бла бла");
или
$('#idTxtArGenHtml').вал( $('idDivMain').формат html() );
у меня была проблема с каким-то специальным символом ( & '" ), когда они находятся между quot. Но когда я использую функцию : $(элемент textarea.)html () текст в порядке.
есть пример :
<FORM id="idFormContact" name="nFormContact" action="send.php" method="post" >
<FIELDSET id="idFieldContact" class="CMainFieldset">
<LEGEND>Test your newsletter» </LEGEND>
<p>Send to à : <input id='idInpMailList' type='text' value='youremail@gmail.com' /></p>
<FIELDSET class="CChildFieldset">
<LEGEND>Subject</LEGEND>
<LABEL for="idNomClient" class="CInfoLabel">Enter the subject: * </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();"/>
<INPUT id="idBtnSend" type="button" value="Send" onclick="onSend();"/><BR/><BR/>
<LEGEND>Message</LEGEND>
<LABEL for="idTxtArGenHtml" class="CInfoLabel">Html code : * </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, который не работает для заполнения textarea:
function onGenHtml(){
$('#idTxtArGenHtml').html( $("#idDivMain").html() );
}
наконец решение :
function onGenHtml(){
$('#idTxtArGenHtml').html( $("#idDivMain").html() );
$('#idTxtArGenHtml').parent().replaceWith( '<span>'+$('#idTxtArGenHtml').parent().html()+'</span>');
}
трюк обернуть textarea с тегом span, чтобы помочь с функцией replaceWith. Я не уверен, что это очень чисто, но это идеальная работа, чтобы добавить необработанный html-код в textarea.
текстовая область не имеет значения. на jQuery .html () работает в этом случае
$("textarea#ExampleMessage").html(result.exampleMessage);
textarea не хранит значения как
<textarea value="someString">
вместо этого он хранит значения в следующем формате:
<textarea>someString</textarea>
так attr("value","someString")
получает вас такой результат:
<textarea value="someString">someOLDString</textarea>.
попробовать $("#textareaid").val()
или $("#textareaid").innerHTML
вместо.
Я пытался с .val()
.text()
.html()
и были некоторые ошибки с помощью jQuery для чтения или установки значения textarea... я эндап, используя нативный JS
$('#message').blur(function() {
if (this.value == '') { this.value = msg_greeting; }
});
это работает для меня.... Я построил стену лицевой книги...
вот основа моего кода:
// SETS MY TEXT AREA TO EMPTY (NO VALUE)
$('textarea#message_wall').val('');
мы можем использовать .val () or .текст() методы для установки значений. нам нужно поместить значение внутри 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
чтобы установить значение 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="<a href="google.com">google.com</a>">Google HTML</a>
<a id="yahoo_html" class="load_html" href="#" data-my_html="<a href="yahoo.com">yahoo.com</a>">Yahoo HTML</a>
<a id="clear_html" href="#">Clear HTML</a>
принятый ответ работает для меня, но только после того, как я понял, что должен выполнить свой код после завершения загрузки страницы. В этой ситуации встроенный скрипт не работал, я думаю, потому что #my_form еще не был загружен.
$(document).ready(function() {
$("#my_form textarea").val('');
});
вы даже можете использовать приведенный ниже фрагмент.
$("textarea#ExampleMessage").append(result.exampleMessage);
когда у меня был JQuery v1.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');
просто используйте этот код, и у вас всегда будет значение:
var t = $(this);
var v = t.val() || t.html() || t.text();
поэтому он проверит val () и установит его значение. Если val () получает пустую строку, NULL, NaN o.s. он будет проверять html (), а затем текст ()...
это работает:
var t = $('#taCommentSalesAdministration');
t.val('Hi');
помните, что хитрость здесь-убедиться, что вы используете правильный код.
И перед использованием ID убедитесь, что вы положили #
перед ним.
используя $("textarea#ExampleMessage").html('whatever you want to put here');
может быть хорошим способом, потому что .val()
могут возникнуть проблемы при использовании данных из базы данных.
например:
поле базы данных с именем description
имеет следующее значение asjkdfklasdjf sjklñadf
. В этом случае используется .val () присвоить значение textarea может быть утомительной работой.
Я думаю, что отсутствует один важный аспект:
$('#some-text-area').val('test');
работает только при наличии ID-селектор (#)
для селектора классов есть возможность использовать собственное значение, например:
$('.some-text-area')[0].value = 'test';