Question

我目前正在制作基于网络的聊天系统，但我遇到了一个问题。我已经在javascript中设置了一个函数来检查用户是否按下了textarea中的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（）;只是一个字符和行计数器，为用户的利益。说（）;将消息发送到服务器然后调用更新以查看是否有来自其他任何人的消息要显示（不相关）。 HTML：

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

有什么建议吗？

Answer 1

在您的代码中，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
        }
    });
}

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

3 个答案: