原生JS寫的emoji表情選擇器

時間 2019-11-09

原文原文鏈接

筆者寫這玩意找過n個表情選擇器，都用到jquery，移動端實在不合適，由於jquery用min都得90k。並且不須要表情轉文字或文字轉表情這種功能。javascript

本文用到的是div輸入框，且選擇表情後是直接往文本內容插入一段html（emoji爲svg格式），效果表現是即見即得。html

上代碼java

HTMLnode

<div name="note" class="newpost" id="emojiInput" contenteditable="true"></div>
<div id="face"></div>

CSSjquery

　　　　　　　.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>裏）app

//生成表情
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" alt="" />';
                    } else {
                        a.innerHTML = '<img class="emojiSvg" src="emoji-svg/1f6' + i + '.svg" alt="" />';
                    }
                    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);

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。