文本框键盘事件实现，即时聊天功能

文本框键盘事件实现，即时聊天功能

实现成功图片

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();
            });

        });