No se puede actualizar textarea con javascript después de escribirlo manualmente

Question

Estoy escribiendo una aplicación en línea donde guardo algunos textos en la base de datos.
Hay como 5 "textarea" -s y 5 "input type = text" -s.
También estoy implementando una búsqueda para encontrar y editar fácilmente las entradas de la base de datos. Se muestra una nueva ventana de selección (usando prototipo y ajax), y al hacer clic en cualquiera de sus entradas, se llena el siguiente formulario (es el mismo formulario que se usó para agregar nuevos resultados). Ahora aquí es donde surge el problema ....
Si agrego un nuevo formulario o edito uno existente TODOS LOS campos de TEXTAREA que fueron modificados, bloqueados o algo así (solo textareas, las entradas aún funcionan) ... Ellos ya no obedecerá a Javascripts .update, por lo que no cambian cuando selecciono la siguiente entrada ... O AL MENOS NO ESTÁN EN FireFox (3.5.a algo). Funciona bien en IE, pero dado que soy un usuario de FF y no quiero que funcione allí también, me pregunto si alguien ha encontrado problemas similares y lo ha resuelto con facilidad.
El problema parece desaparecer cuando llamo a form.reset(), pero eso arruina algunos campos de selección/opción generados por código, además de que no quiero que los datos permanezcan.

Para mí, parece que FF decidió que el texto que ingresé es más importante que el texto que javascript intenta ingresar, por lo que lo anula ... y no puedo entender por qué. En este punto estoy culpando a .update(), pero no estoy seguro de cómo hacerlo de otra manera.
Los campos de ENTRADA parecen tener problemas con .update (o simplemente no funcionó para mí), así que tuve que reescribirlos en .value = (también he probado .value con textareas, esperando que eso arregle algo, tristemente sin resultado).

Entonces, ¿alguien tiene alguna pista de por qué sucede esto y cómo solucionarlo, sin tener que restablecer el formulario en cada paso?

Answer 1

.valor y.innerHtml parecía solucionar el problema

Answer 2

Tengo este problema exacto. Hasta ahora he intentado

$('#addofferlink').click(function(){ 
    var offer = "#OFFER_"+$('#offer_id').val()+"#"; 
    $('#message').append(offer); 
}); 

También he intentado,

$('#addofferlink').click(function(){ 
    var e = $('#message').html(); 
    var offer = "#OFFER_"+$('#offer_id').val()+"#"; 
    $('#message').html(e+offer); 
}); 

El problema parece ser que si el usuario escribe en el área de texto (#message) y luego hace clic en el botón para añadir el enlace a la oferta no se muestra nada Al mirar la fuente, usando Firebug, puedo ver que el texto real contenido en el área de texto está siendo modificado, pero no se muestra en la pantalla.

Parece que el javascript está cambiando el contenido html de la etiqueta, pero el navegador está almacenando los contenidos actualmente tipeados en la memoria (supongo) o en otro lugar.

Al actualizar el área de texto usando val (oferta de e +) se eliminará el texto introducido y se lo reemplazará con el enlace de oferta, y la oferta innerHTML = e + no funcionará en absoluto, sin mostrar cambios en el área de texto.

---

¡He logrado ordenar esto!

Mi pensamiento giraba en torno al hecho de que debido a que la etiqueta contiene el texto, y tiene su propia etiqueta de cierre, tendría que obtener su contenido usando .html().

Al usar .val() para obtener el contenido del campo, puede extraer y actualizar los contenidos simplemente. Terminé con lo siguiente,

$('#addofferlink').click(function(){ 
    var e = $('#message').val(); 
    var offer = "#OFFER_"+$('#offer_id').val()+"#"; 
    $('#message').val(e+offer); 
}); 

Answer 3

He arreglado este problema extraño simplemente por:

document.forms[0].text_area_name.value = "STUFF"; 

Incluso después de modificar el área de texto del guión sobrescribirá.

innerHTML no funcionó para mí después de modificar el área de texto.

Answer 4

Tuve este mismo problema. Cuando HTML está analizando al objeto DOM, el contenido de textarea es innetHTML de <textarea>

<textarea cols="10" rows="10">Content of textarea</textarea> 

Valores document.getElementByTagName('textarea').innerHTML y document.getElementByTagName('textarea').value devuelve este mismo valor Content of textarea

Pero después de la carga de objetos DOM, cambiando innerHTML valor no cambia el contenido de la textarea caja. Una solución para cambiarlo es modificar el campo value.

document.getElementByTagName('textarea').value="New content of textarea"; 

o en jQuery

$("textarea").val("New content of textarea"); 

Answer 5

A veces es posible que desee mostrar en un área de texto, una cadena particular y dejar que al usuario ver lo que es, posiblemente, a continuación, realizar cambios en él; pero, desea permitirles ver cuál era el texto original. Textareas es bastante difícil de manejar, pero incluso un cambio manual en el texto editado es reversible utilizando esta configuración.

<button id="ShowNOWxItmDscptn" onClick="EditItmDesc(1)">What is it now?</button> 
<button id="OpnTAxWriteNewEdit" onClick="EditItmDesc(2)">Write/Edit</button> 
<textarea id="RUBYxDescribe" max="500" width="75" placeholder="Magic"> </textarea> 

// a global variable: 
// UVarDescriptionTxt = ("This is the first line.\r\nSecond line!"); 

function EditItmDesc(x){ 
    console.log("*x* = "+x+"."); 
    console.log("Text to reset : "+UVarDescriptionTxt+"."); 

    var InnyShow = document.getElementById("RUBYxDescribe"); 
    InnyShow.value = UVarDescriptionTxt; 

    if(x == 1) { 
     InnyShow.innerHTML = ""; 
     InnyShow.textContent = ""; 
     InnyShow.innerHTML = UVarDescriptionTxt; 
    } 

    if(x == 2){ 
     InnyShow.value = ""; 
    } 
} 

La estructura anterior me solucionó ese problema.