首页 > 代码库 > html 富文本编辑器相关--中文状态下输入@的问题
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 =http://www.mamicode.com/ 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 =http://www.mamicode.com/ $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 = http://www.mamicode.com/temp_aite.html();>*/ /** * 输入@后触发其他区域 */ $(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); };})
html 富文本编辑器相关--中文状态下输入@的问题
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。