首页 > 代码库 > 原生JS写的emoji表情选择器
原生JS写的emoji表情选择器
笔者写这玩意找过n个表情选择器，都用到jquery，移动端实在不合适，因为jquery用min都得90k。而且不需要表情转文字或文字转表情这种功能。
本文用到的是div输入框，且选择表情后是直接往文本内容插入一段html（emoji为svg格式），效果表现是即见即得。
上代码
HTML
<div name="note" class="newpost" id="emojiInput" contenteditable="true"></div><div id="face"></div>
CSS
.emojiSvg { width: 2em; height: 2em; } div.newpost { text-align: center; line-height: 18px; font-size: 16px; padding: 0px; background: #fff; width: 100%; height: 100px; _height: 16px; margin-left: auto; margin-right: auto; margin-bottom: 15px; outline: 0; word-wrap: break-word; overflow-y: hidden; z-index: 1000; border-bottom: 1px solid #cccccc; } #face { padding: 5px; }
JS（如果页面内有其他onload，ready之类，请把本代码放到<head>里）
//生成表情window.onload = function() { var face = document.getElementById(‘face‘); for(var i = 0; i < 38; i++) { var a = document.createElement("a"); a.href = "javascript:;"; if(i < 10) { a.innerHTML = ‘<img class="emojiSvg" src="http://www.mamicode.com/emoji-svg/1f60‘ + i + ‘.svg" />‘; } else { a.innerHTML = ‘<img class="emojiSvg" src="http://www.mamicode.com/emoji-svg/1f6‘ + i + ‘.svg" />‘; } face.appendChild(a); }; } //点击插入表情 setTimeout(function() { var pickers = face.getElementsByTagName(‘a‘); var emojiInput = document.getElementById(‘emojiInput‘); for(var i = 0; i < pickers.length; i++) { pickers[i].onclick = function(e) { document.getElementById(‘emojiInput‘).focus(); insertHtmlAtCaret(this.innerHTML); // emojiInput.innerHTML+=this.innerHTML; } } function insertHtmlAtCaret(html) { var sel, range; if(window.getSelection) { // IE9 and non-IE sel = window.getSelection(); if(sel.getRangeAt && sel.rangeCount) { range = sel.getRangeAt(0); range.deleteContents(); // Range.createContextualFragment() would be useful here but is // non-standard and not supported in all browsers (IE9, for one) var el = document.createElement("div"); el.innerHTML = html; var frag = document.createDocumentFragment(), node, lastNode; while((node = el.firstChild)) { lastNode = frag.appendChild(node); } range.insertNode(frag); // Preserve the selection if(lastNode) { range = range.cloneRange(); range.setStartAfter(lastNode); range.collapse(true); sel.removeAllRanges(); sel.addRange(range); } } } else if(document.selection && document.selection.type != "Control") { // IE < 9 document.selection.createRange().pasteHTML(html); } } }, 500);
原生JS写的emoji表情选择器
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。