Je ne peux pas mettre à jour la zone de texte avec javascript après avoir écrit manuellement

Question

Je suis en train d'écrire une application en ligne où je sauvegarde des textes dans la base de données.
Il y a 5 "textarea" -s et 5 "input type = text" -s.
Je suis également en train de mettre en œuvre une recherche pour trouver et modifier facilement les entrées de la base de données. Une nouvelle fenêtre de sélection est affichée (en utilisant prototype et ajax), et en cliquant sur l'une de ses entrées le formulaire ci-dessous est rempli (c'est le même formulaire qui a été utilisé pour ajouter de nouveaux résultats). Maintenant, voici où le problème se pose ....
Si j'ajoute un nouveau formulaire ou modifie un existant TOUS les champs TEXTAREA qui ont été modifiés, se verrouillent ou quelque chose comme ça (seulement les zones de texte, les entrées fonctionnent toujours) ... Ils n'obéira plus aux Javascripts .update, donc ils ne changent pas quand je sélectionne l'entrée suivante .... OU AU MOINS ELLES NE FONT PAS dans FireFox (3.5.something). Cela fonctionne bien dans IE, mais depuis que je suis un utilisateur FF et je ne veux pas que ça marche aussi bien je me demande si quelqu'un a rencontré des problèmes similaires et résolu avec facilité.
Le problème semble disparaître quand j'appelle form.reset(), mais cela gâche certains champs de sélection/option générés par code, en plus je ne veux pas que les données restent.

Pour moi, il semble que FF a décidé que le texte que j'ai entré est plus important que le texte que javascript essaie de saisir, donc il l'annule ... et je n'arrive pas à comprendre pourquoi. À ce stade, je blâme .update(), mais je ne suis pas sûr de savoir comment le faire autrement. Les champs INPUT semblent avoir des problèmes avec .update (ou cela n'a pas fonctionné pour moi), donc j'ai dû les réécrire en .value = (j'ai aussi essayé .value avec textareas, en espérant que ça réglerait n'importe quoi, malheureusement sans succès).

Alors, quelqu'un a-t-il des indices sur la raison pour laquelle cela se produit et sur la façon de le réparer, sans avoir à réinitialiser le formulaire à chaque étape?

Answer 1

.value et.innerHTML semblait résoudre le problème

Answer 2

J'ai ce problème exact. Jusqu'à présent, je l'ai essayé

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

J'ai aussi essayé,

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

Le problème semble être que si les types d'utilisateur dans la zone de texte (#message) puis clique sur le bouton pour ajouter le lien vers l'offre , rien n'est affiché. En regardant la source, en utilisant Firebug, je peux voir que le texte réel contenu dans la zone de texte est en cours de modification, mais pas affiché à l'écran.

Il semble que le javascript change le contenu html de la balise, mais le navigateur stocke le contenu actuellement tapé en mémoire (je suppose) ou ailleurs. La mise à jour de la zone de texte à l'aide de val (e + offre) supprimera le texte saisi et le remplacera par l'offre, et l'utilisation de innerHTML = e + offer ne fonctionne pas du tout, ne montrant aucun changement dans la zone de texte.

---

J'ai réussi à trier cela! Ma pensée a tourné autour du fait que parce que la balise contient le texte, et possède sa propre balise fermante, que je devrais obtenir son contenu en utilisant .html().

En utilisant .val() pour obtenir le contenu du champ, vous pouvez ensuite extraire et mettre à jour le contenu simplement. Je me suis retrouvé avec ce qui suit,

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

Answer 3

je fixe ce problème étrange simplement par:

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

Même après avoir modifié le textarea le script remplacera.

innerHTML n'a pas fonctionné pour moi après avoir modifié la zone de texte.

Answer 4

J'ai eu le même problème. Lorsque HTML est l'analyse à l'objet DOM, le contenu de textarea est innetHTML de <textarea>

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

Valeurs document.getElementByTagName('textarea').innerHTML et document.getElementByTagName('textarea').value renvoie cette même valeur Content of textarea

Mais après objet chargement DOM, en changeant la valeur innerHTML ne change pas le contenu de textarea boîte. Une solution pour le modifier modifie le champ value.

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

ou jquery

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

Answer 5

Parfois, vous voudrez peut-être afficher dans une zone de texte, une chaîne particulière et laisser l'utilisateur voir ce qu'il est, alors peut-être y apporter des modifications; mais, vous souhaitez leur permettre de voir ce que le texte original était. Les zones de texte sont assez lourdes, mais même une modification manuelle du texte modifié est réversible en utilisant cette configuration.

<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 structure ci-dessus a résolu ce problème pour moi.