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。