Problèmes d'effacement <textarea> après l'envoi du message

Question

Je suis en train de créer un système de discussion en ligne, mais j'ai rencontré un problème. J'ai mis en place une fonction en javascript pour vérifier si l'utilisateur appuie sur entrer dans la zone de texte et envoyer le message si cela s'est produit. Le problème est que chaque fois que cette fonction est utilisée, la zone de texte est laissée avec un seul retour de chariot comme si la valeur de la zone de texte était "\ n" alors qu'elle devrait être juste "". Voici le code:

function checkEnter(e) { 
var charCode; 
if (e && e.which) { 
    charCode = e.which; 
} else { 
    charCode = e.keyCode; 
} 
if (charCode == 13) { 
    say(); 
    document.getElementById('chatfieldbox').value = ""; 
    return false; 
} else { 
    return true; 
} 
} 
function say() { 
updateStats(); 
text = document.getElementById('chatfieldbox').value; 
xhr=new XMLHttpRequest(); 
xhr.open("POST", "say", false); 
xhr.setRequestHeader("Content-type", "application/x-www-form-urlencoded"); 
xhr.setRequestHeader("Content-length", text.length); 
xhr.setRequestHeader("Connection", "close"); 
xhr.send("text=" + text); 
document.getElementById('chatfieldbox').value = ""; 
update(); 
} 
function updateStats() { 
var text = document.getElementById('chatfieldbox').value; 
var num = text.length; 
var lines = 1; 
for (var i = 0; i < num; i++) { 
    if (text.charAt(i) == '\n') { 
    lines++; 
    } 
} 
document.getElementById('characters').innerHTML = num; 
document.getElementById('lines').innerHTML = lines; 
} 

say(); fait des trucs ajax pour envoyer le message. updateStats(); est juste un compteur de caractères et de lignes pour le bénéfice de l'utilisateur. dire(); envoie le message au serveur puis appelle à mettre à jour pour voir s'il y a des messages de quelqu'un d'autre à afficher (non pertinents). Le code HTML:

<textarea id="chatfieldbox" onKeyPress="checkEnter(event)"></textarea> 

Des suggestions?

Answer 1

Un couple de choses que je pense que aiderait:

Utilisez l'événement keyDown (si pas déjà):

textarea.onkeyDown = checkEnter; 

En checkEnter vous devez passer la référence textarea à la fonction par exemple:

if (charCode == 13) { 
    elm = e.target || e.srcElement; 
    say(elm); 
    return false; 
} else { 
    return true; 
} 

Et dans la fonction say, effacez la valeur lorsque vous obtenez une réponse positive de la part de serveur.

function say(elm){ 
    var txt = elm.value; 
    //make the ajax call and when done, call the 2nd param function 
    call('say', function(resp){ 
     if(resp.ok){ 
      elm.value = ''; 
      doSomethingWith(txt); 
     }else{ 
      //show error 
     } 
    }); 
} 

Answer 2

Dans votre code, la position return false; garantit que document.getElementById('chatfieldbox').value = ""; ne sera jamais appelé. Changez les positions des deux lignes et cela devrait fonctionner. Pourquoi ne supprimez-vous pas la zone de texte avant d'envoyer la requête ajax?

Answer 3

modifier: annuler l'événement bubbling.

function say() { 
    text = document.getElementById('chatfieldbox').value; 
    document.getElementById('chatfieldbox').value = ""; 
    xhr=new XMLHttpRequest(); 
    xhr.open("POST", "say", false); 
    xhr.setRequestHeader("Content-type", "application/x-www-form-urlencoded"); 
    xhr.setRequestHeader("Content-length", text.length); 
    xhr.setRequestHeader("Connection", "close"); 
    xhr.send("text=" + text); 
    update(); 
} 

function checkEnter(e) { 
    var charCode; 
    if (e && e.which) { 
     charCode = e.which; 
    } else { 
     charCode = e.keyCode; 
    } 
    if (charCode == 13) { 
     say(); 
     if (e.stopPropagation) { 
      e.stopPropagation(); 
     } else { 
      window.event.cancelBubble=true; 
     } 
     return false; 
    } else { 
     return true; 
    } 
}