Establecer el valor de textarea en jQuery


525

Estoy intentando establecer un valor en un campo de área de texto usando jquery con el siguiente código:

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

El problema es que, una vez que se ejecuta este código, ¿no está alterando el texto en el área de texto?

Sin embargo, al realizar un alert($("textarea#ExampleMessage").attr("value"))nuevo valor devuelto?


3
Si la magia jQuery no funciona para establecer val () en <textarea>, y está apuntando por ID, es probable que haya múltiples elementos con la misma ID.
billrichards

Respuestas:


877

¿Has probado val?

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

55
sobre todo cierto, aunque val se toma el tiempo para asegurarse de que el valor que está configurando sea una cadena, y attr parece hacer un poco más de magia en general.
enobrev

6262
Si. Un área de texto no tiene un atributo de valor, mientras que una entrada sí.
MDCore

14
De acuerdo, pero val () lo está configurando en esta instancia. Ellos [jquery] deben determinar su tipo de área de texto y establecer el texto.
GONeale

17
textarea tiene una propiedad de valor (JavaScript) al igual que una entrada de texto. No tiene un archivo HTML valueatributo, pero eso no importa, porque tanto val()y attr('value')escritura a la propiedad del valor de JavaScript. Tenga en cuenta, attr()no no establece atributos HTML! Solo establece las propiedades de JavaScript, mientras intenta ocultar la diferencia para casos como class / className donde el nombre es diferente. Pero aún verá la diferencia para los lugares donde el atributo y la propiedad hacen cosas diferentes, como en los elementos de formulario.
bobince

2
val(foo)funciona para mí (jQuery 1.9.1). El uso de text(foo)pierde para actualizar el contenido del área de texto pierde los saltos de línea en IE, y los val(foo)conserva.
Tim

77

Textarea no tiene atributo de valor, su valor viene entre etiquetas, es decir <textarea>my text</textarea>, no es como el campo de entrada ( <input value="my text" />). Por eso attr no funciona :)


50

$("textarea#ExampleMessage").val() en jquery solo una magia.

Debería notar que la etiqueta textarea usa html interno para mostrar y no en el atributo de valor al igual que la etiqueta de entrada.

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

Deberías usar

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

o

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

dependa de si desea mostrarlo como etiquetas html o texto sin formato.


1
Tienes razón, textarea no tiene un valor o valor, y jquery solo está haciendo algo de magia para facilitarle la vida al desarrollador.
Scott Kirkwood

16
No se llama magia, se llama abstracción. textarea es solo de 1 y 0, pero todas las capas de abstracción en su computadora lo ocultan para usted. Está bien señalarlo, pero no le pidas a la gente que desestime otras respuestas por esa razón ... :)
Espen Herseth Halvorsen

8
cuidado: html () ejecuta etiquetas de script.
Lincoln B

3
Desde jQuery API "El método .text () no se puede usar en entradas de formularios o scripts. Para establecer u obtener el valor de texto de los elementos input o textarea, use el método .val (). Para obtener el valor de un elemento de script, use el método .html () ".
piloto

20

Oohh vamos chicos! funciona solo con

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

Solo si usa un selector de ID. No puedo, ya que el mío es código generado por terceros
Jack

16

Creo que esto debería funcionar :

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

10

Tenía la misma pregunta, así que decidí probarlo en los navegadores actuales (estamos un año y medio más tarde en el tiempo después de esta pregunta), y esto ( .val) funciona

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

para

  • IE8
  • FF 3.6
  • FF4
  • Opera 11
  • Chrome 10

1
Para el registro, una de las funcionalidades excepcionales de jQuery es la de proporcionar compatibilidad con el navegador, así que sí, es muy probable que .val()haga su magia en varios navegadores;)
diosney

9

En Android .valy .htmlno funcionó.

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

hizo el trabajo


1
Desde jQuery API "El método .text () no se puede usar en entradas de formularios o scripts. Para establecer u obtener el valor de texto de los elementos input o textarea, use el método .val (). Para obtener el valor de un elemento de script, use el método .html () ".
piloto

8

Tuve el mismo problema y esta solución no funcionó, pero lo que funcionó fue usar html

$('#your_textarea_id').html('some_value');

3
no, html()solo funciona una vez por área de texto, la próxima vez, desea cambiar dinámicamente el contenido de textarea, html()no funcionará ...
Legionar

@Legionar entonces, ¿cómo manejar este caso?
Jawand Singh

bueno, este me ayudó a stackoverflow.com/questions/1219860/... usando estas funciones, solo configuré el valor codificado en textarea usando$('#textarea').val(encodedtext);
Jawand Singh

5

Ahí está el problema: necesito generar código html desde el contenedor de un div dado. Entonces, tengo que poner este código html en bruto en un área de texto. Cuando uso la función $ (textarea) .val () así:

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

o

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

Tuve problemas con algunos caracteres especiales ('') cuando están entre ''. Pero cuando uso la función: $ (textarea) .html () el texto está bien.

Hay un formulario de ejemplo:

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

Y el código javascript / jquery que no funciona para llenar el área de texto es:

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

Finalmente la solución:

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

El truco es envolver su área de texto con una etiqueta span para ayudar con la función replaceWith. No estoy seguro de si está muy limpio, pero también funciona perfectamente, agregue código html sin procesar en un área de texto.


5

textarea no almacena valores como

<textarea value="someString">

en su lugar, almacena valores en este formato:

<textarea>someString</textarea>

Entonces attr("value","someString")te da este resultado:

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

intente $("#textareaid").val()o en su $("#textareaid").innerHTMLlugar.


5

El área de texto no tiene valor. jQuery .html () funciona en este caso

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

2
no, html()solo funciona una vez por área de texto, la próxima vez, desea cambiar dinámicamente el contenido de textarea, html()no funcionará ...
Legionar

y si hiciste .empty (). html ('newContent') @Legionar?
VH

3

Funciona para mí ... He construido una pared de libro de cara ...

Aquí está la base de mi código:

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

3

Para establecer el valor de área de texto de HTML codificado (para mostrar como HTML) debe usarlo, .html( the_var )pero como se mencionó si intenta configurarlo nuevamente, puede (y probablemente) no funcionará.

Puede solucionar esto vaciando el área de texto .empty()y luego configurándolo nuevamente con.html( the_var )

Aquí hay un JSFiddle que funciona: 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

Lo intenté .val() .text() .html()y tuve algunos errores usando jQuery para leer o establecer el valor de un área de texto ... terminé usando js nativo

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



2

Creo que falta un aspecto importante:

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

funciona solo cuando hay un selector de ID (#)

para el selector de clase hay una opción para usar el valor nativo como:

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

1

La respuesta aceptada funciona para mí, pero solo después de que me di cuenta de que tenía que ejecutar mi código una vez que la página terminó de cargarse. En esta situación, el script en línea no funcionó, supongo porque #my_form aún no se cargó.

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

pdub23, siempre es mejor comentar la respuesta aceptada que crear una nueva respuesta ...
Fábio Batista

1

Incluso puedes usar el siguiente fragmento.

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

1

Cuando tuve JQuery v1.4.4 en la página, ninguno de estos funcionó. Al inyectar JQuery v1.7.1 en mi página, finalmente funcionó. Entonces, en mi caso, fue mi versión de JQuery la que causó el problema.

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

He usado $(textarea).val/html/text(any_str_var)todo lo trabajado para mí. Si desea asegurarse de que su variable como una cadena se agregue al área de texto, siempre puede concat así:

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

El método .val () definitivamente se usa en textarea - ver: https://api.jquery.com/val/

.html () se puede usar para obtener o establecer el contenido de cualquier elemento; consulte: https://api.jquery.com/html/#html2

.text () es lo mismo que .html, excepto que se puede usar para configurar el contenido XML: consulte - https://api.jquery.com/text/#text-text

También puede leer más acerca de cómo cada uno actúa sobre caracteres especiales con cada uno de esos enlaces.


0

Simplemente use este código y siempre tendrá el valor:

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

Entonces verificará val () y establecerá su valor. Si val () obtiene una cadena vacía, NULL, NaN, buscará html () y luego text () ...


0

Esto funciona:

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

Recuerde, la parte difícil aquí es asegurarse de usar la identificación correcta. Y antes de usar la identificación, asegúrese de ponerla #antes.


0

Usar $("textarea#ExampleMessage").html('whatever you want to put here');puede ser una buena manera, porque .val()puede tener problemas cuando usa datos de la base de datos.

Por ejemplo:

Un campo de base de datos denominado como descriptiontiene el siguiente valor asjkdfklasdjf sjklñadf. En este caso, usar .val () para asignar valor a textarea puede ser un trabajo tedioso.


0

Intenté establecer value / text / html usando JQuery pero no tuve éxito. Entonces intenté lo siguiente.

En este caso, estaba inyectando un nuevo elemento textarea a un DOM creado.

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

ingrese la descripción de la imagen aquí

Al usar nuestro sitio, usted reconoce que ha leído y comprende nuestra Política de Cookies y Política de Privacidad.
Licensed under cc by-sa 3.0 with attribution required.