文本框键盘事件实现,即时聊天功能
实现成功图片
html内容
<div class="cont-case__box">
<ul class="cont-case">
<li></li>
</ul>
</div>
<textarea id="messaging" class="u-textarea" placeholder="聊天内容,回车即可发送。"></textarea>
<button id="send">发送</button>
js内容
<script src="./basic/jquery.min.js"></script>
$(function(){
//即时信息发送方法
function sendMsg(){
var _val = $('#messaging').val().replace(/(^\s+)|(\s+$)/g, ""); //自动去除文本框前后空格
var _length = $('#messaging').val().replace(/(^\s+)|(\s+$)/g, "").length; //文本框内容有效长度
var $contCase = $('.cont-case');
var _boxHeight = $contCase.height(); //获得所有聊天内容高度
var _str = '<li>' +
'<pre class="chat__detail">' + _val + '</pre>' //使用pre标签保持输入文本时的内部格式
'</li>';
if(_length>0){
$contCase.append(_str); //输入有效内容,将内容在页面展示
$('#messaging').val(""); //清空原文本内容
$(".cont-case__box").scrollTop(_boxHeight); //输入的及时内容在文本底部显示
}else {
console.log("输入内容为空!")
}
}
//文本框绑定键盘事件
$('#messaging').bind('keydown',function(e){
var _k = e.keyCode;
var _ctrlKey = e.ctrlKey;
if(_k == 13 && _ctrlKey){ // 判断 ctrl+enter 换行
var _val = $('#messaging').val();
$('#messaging').val(_val + '\n');
}else if(_k == 13){ //判断enter键
e.preventDefault(); //阻止换行的默认行为
sendMsg(); //信息发送
}
});
//点击发送按钮信息发送
$('#send').click(function(){ //按下按钮发送信息
sendMsg();
});
});