问题清除 <textarea> 消息发送后

Question

我目前正在制作一个基于Web的聊天系统，但是遇到了问题。 我已经在javascript中设置了一个函数，以检查用户是否在文本区域中按Enter键，如果发生这种情况，则发送消息。 问题在于，每次使用该函数时，textarea中都留下一个回车符，好像textarea的值应为“ \\ n”时一样。 这是代码：

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

说（）; 做一些ajax的东西来发送消息。 updateStats（）; 只是为了用户利益的字符和行计数器。 说（）; 将消息发送到服务器，然后调用update来查看是否有来自其他任何人的消息要显示（不相关）。 HTML：

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

有什么建议么？

Answer 1

在您的代码中return false;的位置return false; 确保document.getElementById('chatfieldbox').value = ""; 永远不会被打电话。 切换两条线的位置即可。

Answer 2

您为什么不先清除文本框，然后再发送ajax请求。

编辑：也取消事件冒泡。

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

Answer 3

我猜有两件事会有所帮助：

使用keyDown事件（如果还没有）：

textarea.onkeyDown = checkEnter;

在checkEnter中，您应该将textarea引用传递给say函数：

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

然后在say函数中，当服务器收到肯定响应时，清除该值。

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
        }
    });
}