原生JS写的emoji表情选择器

Posted 一芥华

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了原生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="emoji-svg/1f60‘ + i + ‘.svg"  />‘;
                    } else {
                        a.innerHTML = ‘<img class="emojiSvg" src="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表情选择器的主要内容，如果未能解决你的问题，请参考以下文章

emoji表情处理，emoji表情的编码解码

Js聊天项目-删除输入聊天的emoji表情

Python string中删除(过滤)掉emoji表情字符

自定制emoji替换系统的emoji键盘

WordPress 使用本地化的 emoji 表情包

JavaScript Emoji 表情库_js 类似于qq微信的表情库