javascript - 单击按钮后文本区域输入未设置为空字符串，文本区域光标未从头开始

Question

This is my original outlook: 这很好用，没有问题。这是我的原始代码:
相关CSS:

.message_write {
    border-top:  3px solid #000 ;
    background: rgba(255, 255, 255, 0.418) none repeat scroll 0 0;
    float: left;
    padding: 15px;
    width: 100%;
}

    .message_write textarea.form-control {
        height: 70px;
        padding: 10px;
    }

.chat_bottom {
    float: left;
    margin-top: 13px;
    width: 100%;
}

内部组.hbs

                              <form  id="message-form" method="post">
                                  <input type="hidden" id="groupName" value={{name}}>
                                 <input type="hidden" id="sender" value={{user.username}}>
                                 <div id="emoji"></div>
                                  <textarea class="form-control nes-textarea" name="message" id="msg" placeholder="Type a message"></textarea>

                                  <div class="chat_bottom">
                                      <button id="send-message" class="pull-right btn btn-primary nes-btn is-primary">
                                          Send
                                      </button>
                                  </div>
                              </form>

在 groupchat.js 内部:所以我从客户端发出消息。

    $('#message-form').keydown((e) => {
        var keyCode = e.keyCode || e.which;
        if(keyCode === 13 ){
            console.log("I just pressed enter")
            e.preventDefault();
            sendMessage();
        }
    })

    // we emit event from client, so we need to go to server to listen event
    $('#message-form').on('submit', (e) => {
        e.preventDefault();
        sendMessage();
    })

    function sendMessage(){
        var msg = $('#msg').val();
        console.log(msg)
        if (msg !== ""){
            socket.emit('createMessage', {
                text: msg,
                room,
                sender
            }, function(){
                $('#msg').val('');
            });
        }
    }

这是我添加 emojionearea.js 所做的: 添加后

$(document).ready(() => {
    $("#msg").emojioneArea();
});

然后我使用开发者工具来检查元素: 它变成以下元素 html after I add emojionearea.js

现在，我的文本区域看起来像这样: after I add emojionearea.js into textarea
第一个问题:文本区域不再从框的开头开始，它总是从字母 m 开始。而且我什至无法单击或将光标移动到框的开头。
第二个问题:单击发送按钮后，它不再将文本区域重置为空字符串。我以前的工作可以重置文本区域。它仍然可以输出我在文本区域中键入的任何内容，但它不再重置它。当我尝试使用 enter 打印消息时。它确实捕获了 keydown 事件，但在 sendMessage() 中，console.log(msg) 返回空字符串。

感谢您的帮助!这是 emojionearea.js我用了。

Answer 1

1. 看起来“emojionearea”有它的 CSS，它使文本区域中的文本居中对齐，要覆盖它，请添加:

   #msg {
      text-align: left;
   }

确保它出现在“emojionearea”CSS 文件之后，或者在“center”(以及它们之间的空格)之后添加“!important”语句。

1. 尝试添加一个事件函数来重置您的表单:

   $("#send-message").on("submit", function () {
        $("#message-form").reset();
    });

希望对您有所帮助。