最近在做一个客服机气人聊天项目,当中有个需求就是方向键上键可以调出上一句话直至第一句,方向键下键可以向后调出上一句话的下句话,存的是localStorage缓存,即是刷新界面聊天记录也是存在

这里直接上js代码

keydown: function(e) {
            // 键盘按下enter,存下问题
            if (event.which == '13') {
                msgValue = $.trim($(this).val());
                e.preventDefault();
                e.stopPropagation();
                sendHandle();

                if (msgValue !== '') {
                    msgList.push(msgValue);
                    localStorage.setItem('history', JSON.stringify(msgList))
                }
                if (msgList.length > 0) {
                    msgNum = msgList.length - 1;
                }
            } else if (event.which == '38') {
                // 上键
                if (msgNum < 0) {
                    return;
                }
                msgList = JSON.parse(localStorage.getItem('history'));
                $(".smartnlp-writeBox").val(msgList[msgNum]);
                msgNum--;
            } else if (event.which == '40') {
                // 下键
                if (msgNum >= msgList.length - 1) {
                    $(this).text('');
                } else {
                    msgNum++;
                    msgList = JSON.parse(localStorage.getItem('history'));
                    $(".smartnlp-text-content-pc").val(msgList[msgNum]);
                }
            }

        }

这里用到了数组的push方法 、 js监听按下那个键盘按键的判断的e.which、localstorage的存储与读取、JSON.parse()JSON.stringify()jquery

localstorage和json.parse()小解请参考

jquery就不用说了,用起来方便的飞起

数组的push方法:push() 方法可向数组的末尾添加一个或多个元素,并返回新的长度

这里需要重点说的一下是e.which

e.which:用于获取按下的键盘按键Unicode值;一般配合keydown,press,keyup等键盘事件一起使用

提示: 如果需要知道用户按下的是打印键 (如 "a" 或 "5"),建议使用 onkeypress 事件。如果需要知道用户按下的是功能键(如 "F1", "CAPS LOCK" 或 "Home") 可使用 onkeydownonkeyup 事件。

注意:IE8 及其更早版本不支持 which 属性。不支持的浏览器可使用 keyCode 属性。但是, keyCode 属性在 Firefox 浏览器的 onkeypress 事件中是无效的。 兼容这些浏览器你可以使用以下代码:

var x = event.which || event.keyCode;  // 使用 which 或 keyCode, 这样可支持不同浏览器

如果你想查看是否按下了 "ALT", "CTRL", "META" 或 "SHIFT" 键,可使用 altKey, ctrlKey, metaKey 或 shiftKey 属性。

欢迎各位指正


扫描二维码,在手机上阅读!