单击按钮后,textarea输入未设置为空字符串,并且文本区域光标也未从头开始

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

.message_write {
    border-top:  3px solid #000 ;
    background: rgba(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%;
}

内部group.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
第一个问题:textarea不再从框的开头开始,而是始终从字母m开始。而且我什至无法单击或将光标移动到框的开头。
第二个问题:单击发送按钮后,它不再将textarea重置为空字符串。我以前的工作可以重设textarea。它仍然可以输出我在文本区域中键入的内容,但是不再重置它。当我尝试使用enter打印消息时。它确实捕获了keydown事件,但是在sendMessage()中,console.log(msg)返回空字符串。

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

z4521215 回答:单击按钮后,textarea输入未设置为空字符串,并且文本区域光标也未从头开始

  1. 类似“ emojionearea”的CSS可使文本区域中的文本居中对齐,以覆盖它并添加:
   #msg {
      text-align: left;
   }

请确保它位于“ emojionearea” CSS文件之后,或者在“中心”一词(以及它们之间的空格)后添加“!important”语句。

  1. 尝试添加事件函数以重置表单:
   $("#send-message").on("submit",function () {
        $("#message-form").reset();
    });

希望有帮助。

本文链接:https://www.f2er.com/3001719.html

大家都在问