javascript - 清除后恢复到文本区域框的开头

Question

我有一个文本区域，在用户按下回车键后我会清除它。我想将光标重置到文本区域的开头，但由于某种原因，它被放置在第二行的开头，并在第二次按下 Enter 时返回一个空行和文本。第二次按下 Enter 时，文本被清除，插入符号保留在第二行，只有第一次才会转到第二行。

$(function(){
    var chatArea;
    chatArea = $("#chattingArea").keypress(function(event){
        if(event.which === 13){
            console.log($("#theTextbox").val());
            $("#theTextbox").val("");
            $("#theTextbox")[0].setSelectionRange(0, 0);
        }
    });
});

HTML:

` 聊天软件

<div id="chattingArea">
    <textarea id="theTextbox"></textarea>
</div>
<div id="chat">

</div>

<script src="bower_components/jQuery/dist/jquery.min.js"></script>
<script src="bower_components/bootstrap/dist/js/bootstrap.min.js"></script>
<script src="bower_components/jquery-ui/ui/minified/jquery-ui.min.js"></script>
<script src="chatApp.js"></script>
</body>

`

Answer 1

使用 keyup 而不是 keypress 来防止在文本区域调用 native keypress 事件

HTML

<textarea rows="4" cols="50" id="chat">
At w3schools.com you will learn how to make a website. We offer free tutorials in all web development technologies. 
</textarea>

Jquery

$("#chat").keyup(function(e){
    if(e.which === 13){
        $("#chat").val("");
    }
})

Demo JSfiddle