html 富文本编辑器相关--中文状态下输入@的问题

如何支持输入@可以【@群内人】的功能？

常规思路是   监听keydown 事件  的shift+2

    document.getElementById('input-content').addEventListener('keydown', function (e) {
        if (CHATOBJ.groupType != 2) {//不是群消息
            return;
        }
        //if (e.keyCode === 16) return;
        console.log('没有弹出联系人？:',e);
        if (e.shiftKey && e.keyCode == 50) {//是@
            console.log('开始搜索:',e);
            aiteObj.searching = aiteObj.state.SEARCHING;
            aiteObj.current_aiteId = Math.uuid();
            aiteObj.getSerchList();
            insertAite();
            aiteObj.cursorPosition = aiteObj.getCursorPosition();
            e.preventDefault();
        }

    });

经试验发现这个事件（shift+2） 只是在英文状态下会触发，在中文状态下则事件不会触发，只可以触发（shift）事件。

------------------------------------------------------------------------------------------------------------------------------------------

此处作为html下和中文状态深深相关关联的dom3事件  不得不提到

compositionstart、compositionupdate、compositionend

https://segmentfault.com/a/1190000004326310

----------------------------------------------------------------------------------------------------------------------------------------

然而并没有什么卵用，以上方法只适合中文状态下输入中文，  @却不是中文，

最后由于我们做的是客户端，有c+提供@按下事件，

个人认为 目前纯html能力不足以解决这个问题，

附上c+未提供事件之前的代码

 

/*
 *  Created by shangkui
 *  Date:2017-04-10
 *  群@
 */
var commonAiteObj = {
    getSerchListStr: function (list) {
        var tempItem = '';
        var ret = '';
        list.forEach(function (item) {
            var imId = item.imId;
            tempItem += '<li class="msg-aite" im-id="' + imId + '"><div>' + item['nickName'] + '</div></li>'
        });
        return ret = '<ul>' + tempItem + '</ul>';
    },
    showSerchList: function (list, position) {
        if (list.length === 0) {
            console.log('没有查找到任何人员');
            commonAiteObj.hideSerchList();
            return;
        }
        var SerchListStr = this.getSerchListStr(list);
        //console.log('群成员字符串：',SerchListStr);
        //console.log(position);
        aiteObj.$memberContainer.removeClass('hideList').html(SerchListStr);

        var top = aiteObj.$memberContainer.height();
        aiteObj.$memberContainer.css({
            left: position.right ,
            top: position.top - top
        });
    },
    hideSerchList: function () {
        if (aiteObj.searching == aiteObj.state.SEARCHING) {
            console.log('输入@后触发其他地方');
            aiteObj.searching = aiteObj.state.STOP;
            aiteObj.$memberContainer.addClass('hideList');
            var temp_aite = aiteObj.$inputContainer.find('#' + aiteObj.current_aiteId + '');
            var temp_aiteValue = temp_aite.html();
            console.log(temp_aiteValue);
            //temp_aite.after(temp_aiteValue);
            temp_aite.remove();
            insertImg(temp_aiteValue);
        }
    },
    serching: function () {
        console.log('searching状态:', aiteObj.searching);
        if ((aiteObj.searching === aiteObj.state.SEARCHING) && (!aiteObj.composing)) {
            var $temp_aite = aiteObj.$inputContainer.find('#' + aiteObj.current_aiteId + '');
            var temp_aiteValue = $temp_aite.html();
            var searchKey = temp_aiteValue.substring(1, temp_aiteValue.length);
            aiteObj.cursorPosition = aiteObj.getCursorPosition();
            console.log('实时搜索的内容：', searchKey);
            //console.log('zongrenshu：', aiteObj.groupMemCount);
            mainObject.searchGroupMemberWhenAT(CHATOBJ.groupId, myInfo.imUserid,searchKey,0, aiteObj.groupMemCount, function (data) {
                //console.log('搜索', data);
                commonAiteObj.showSerchList(data, aiteObj.cursorPosition);
            });
        }
    },
    serchItemClick: function (target) {
        var $this = $(target);
        $this.parent().parent().addClass('hideList');
        var name = $this.find('div').html();
        var imId = $this.attr('im-id');
        console.log('点击的条目：', name);
        //console.log('点击的条目：', imId);
        //var $aite_person = $('<span>'+name+'</span>');
        var $temp_aite = aiteObj.$inputContainer.find('#' + aiteObj.current_aiteId + '');
        $temp_aite[0].contentEditable = false;
        $temp_aite.attr('im-id', imId);
        $temp_aite.attr('class', 'input-msg-aite');
        $temp_aite.html('@' + name + ' ');
        aiteObj.searching = aiteObj.state.FINISH;
        return false;
    }

};

function AiteObj() {
    this.state = {
        STOP: 'STOP',
        SEARCHING: 'SEARCHING',
        FINISH: 'FINISH'
    };
    this.searching = this.state.STOP;
    this.current_aiteId = '';//当前编辑状态中的艾特的id
    this.$memberContainer = '';
    this.$inputContainer = '';
    this.cursorPosition = '';
    this.composing = false;
    this.groupMemCount= 0;
    this.focusState = false;
}
AiteObj.prototype = {
    getSerchList: function () {
        //群成员数量
        mainObject.getGroupMemberCount({'GroupId': CHATOBJ.groupId}, function (data) {
            //console.log('群成员数量:',CHATOBJ.groupId);
            console.log('群成员数量:', data);
            aiteObj.groupMemCount = data.GroupMemCount;
            if (aiteObj.groupMemCount < 0) {
                console.error('请求群成员数量出错')
            }
            mainObject.getGroupMembers({
                'GroupId': CHATOBJ.groupId,
                'GroupMemberPage': 0,
                'GroupMemberPagesize': aiteObj.groupMemCount
            });
        });
    },
    getSerchListCallback: function (list) {
        if (!(this.searching == this.state.SEARCHING)) {
            return;
        }
        commonAiteObj.showSerchList(list, aiteObj.cursorPosition);
    },
    getCursorPosition:function () {
        var aiteSpan = aiteObj.$inputContainer.find('#'+aiteObj.current_aiteId+'')[0];
        //console.log('aiteSpan,',aiteSpan);
        var aiteSpanClientRect = aiteSpan.getBoundingClientRect();
        console.log(aiteSpan);
        console.log(aiteSpanClientRect);
        return aiteSpanClientRect;
    },
    triggerSearch:function () {

    }

};
var aiteObj = new AiteObj();

$(function () {
    aiteObj.$memberContainer = $('.acknowledMsgMemberList');
    aiteObj.$inputContainer = $('#input-content');
    /**
     * 输入@触发
     */
    document.getElementById('input-content').addEventListener('keydown', function (e) {
        if (CHATOBJ.groupType != 2) {//不是群消息
            return;
        }
        //if (e.keyCode === 16) return;
        console.log('没有弹出联系人？:',e);
        if (e.shiftKey && e.keyCode == 50) {//是@
            console.log('开始搜索:',e);
            aiteObj.searching = aiteObj.state.SEARCHING;
            aiteObj.current_aiteId = Math.uuid();
            aiteObj.getSerchList();
            insertAite();
            aiteObj.cursorPosition = aiteObj.getCursorPosition();
            e.preventDefault();
        }

    });
/*    $('#input-content').on('keydown',function (e) {
        if (CHATOBJ.groupType != 2) {//不是群消息
            return;
        }
        if (e.keyCode === 16) return;
        console.log('没有弹出联系人？:',e);
        if (e.shiftKey && e.keyCode == 50) {//是@
            console.log('开始搜索:',e);
            aiteObj.searching = aiteObj.state.SEARCHING;
            aiteObj.current_aiteId = Math.uuid();
            aiteObj.getSerchList();
            insertAite();
            aiteObj.cursorPosition = aiteObj.getCursorPosition();
            e.preventDefault();
        }

    });*/

    /**
     * 搜索条目点击事件
     */
    aiteObj.$memberContainer.on('click', '.msg-aite', function (e) {
        var target = this;
        return commonAiteObj.serchItemClick(target);
    });
    /**
     * 输入@后输入其他继续搜索
     */
    $(document).on('input', '#input-content', function (e) {
        commonAiteObj.serching();
    });

    /**
     * 输入@后失去焦点
     */
    /*   $(document).on('blur', '#input-content', function (e) {
     if(searching){
     console.log('输入@后失去焦点：',e);
     searching= false;
     $memberContainer.addClass('hideList');
     var temp_aite = $inputContainer.find('#'+current_aiteId+'');
     var temp_aiteValue = temp_aite.html();
     console.log(temp_aiteValue);
     temp_aite.after(temp_aiteValue);
     temp_aite.remove();
     };

     });*/

    /**
     * 输入@后触发其他区域
     */
    $(document).on('click', function () {
        commonAiteObj.hideSerchList();
    });

    aiteObj.$inputContainer[0].addEventListener("compositionstart", function (event) {
        console.log('compositionstart:', event.data);
        aiteObj.composing = true;
    });
    aiteObj.$inputContainer[0].addEventListener("compositionend", function (event) {
        console.log('compositionend:', event.data);
        aiteObj.composing = false;
    });

    aiteObj.$inputContainer[0].addEventListener("blur", function (event) {
        console.log('失去焦点:');
        aiteObj.focusState = false;
    });
    aiteObj.$inputContainer[0].addEventListener("focus", function (event) {
        console.log('获得焦点:');
        aiteObj.focusState = true;
    });
    //此处获取c++回调 shift+2 回调 触发搜索


    /**
     * 输入enter触发
     */
    document.getElementById('input-content').addEventListener('keydown', function (e) {
        if(e.keyCode === 13){
            commonAiteObj.hideSerchList();
        }

    });

    /**
     * 获取光标的位置
     */
    /*   function getCursorPosition() {
     var selection = getSelection();
     var range = selection.getRangeAt(0);
     var rect = range.getClientRects()[0];
     return rect;
     }*/
    /*function getCursorPosition() {

       var aiteSpan = aiteObj.$inputContainer.find('#'+aiteObj.current_aiteId+'')[0];
       //console.log('aiteSpan,',aiteSpan);
        var aiteSpanClientRect = aiteSpan.getBoundingClientRect();
        console.log(aiteSpanClientRect);
       return aiteSpanClientRect;

    };*/

    function insertAite() {
        //var $temp = $('<span id="' + aiteObj.current_aiteId + '">@</span>');
        var temphtml = '<span id="' + aiteObj.current_aiteId + '">@</span>';
        //aiteObj.$inputContainer.append($temp);
        insertImg(temphtml);
    };

})