javascript - <textarea> 标签内存在换行符问题

问题描述

问 题

今天在做一个功能，模仿 QQ 发送消息的形式，可以按下 Enter 或者 Ctrl+Enter 发送消息。但是做的过程中发现一个问题，按 Enter 键发送消息后，<textarea>标签里的消息内容可以被发送，但是发送之后的 textarea 区域却始终会显示一个换行。而使用 Ctrl+Enter 发送消息不会出现问题。（发送消息的方法在发送之后会清空 textarea 里的内容并获取焦点）。代码及效果如下截图：

<textarea class="form-control" rows="5" id="content" placeholder="send message"></textarea>

处理按键方法：

         var send_method = 'e';
         $('textarea').keydown(function(e) {
           if (send_method == 'e') {
            if (e.keyCode == 13) {
              onSubmit(); //发送消息
            }
           } else {
            if (e.ctrlKey && e.keyCode == 13) {
              onSubmit();
            }
           }
         });

发送消息的方法：

function onSubmit() {
    //发送消息
     $('textarea').val('');
     $('textarea').focus();
}

使用 Enter 发送后效果：

使用 Ctrl+Enter 发送后：

所以我不清楚为什么使用 Enter 发送后始终会有一个换行以及如何去掉？

解决方案

$('textarea').keypress(function(event) {
  // Check the keyCode and if the user pressed Enter (code = 13) 
  // disable it
  if (event.keyCode == 13) {
    event.preventDefault();
  }
  
  $(this).text('hello');
});

测试

这篇关于javascript - &lt;textarea&gt; 标签内存在换行符问题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！