Native JS-written emoji expression selector

I write this thing to find N expression selector, all use jquery, mobile is not suitable, because jquery with min all have to 90k. And does not need the expression to turn the text or the text to the expression this function.

This article uses the div input box, and selects the expression to insert a piece of HTML directly into the text content (emoji is the SVG format), the effect is visible.

On the Code

Html

<name= "Note"  class= "Newpost"  ID= "Emojiinput"  contenteditable= "true"></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: +;Border-bottom:1px solid #cccccc; }#face{padding:5px; }

JS (if there are other onload,ready in the page, please put this code in

//Generate EmoticonsWindow.onload =function() {                varface = document.getElementById (' Face ');  for(vari = 0; I < 38; i++) {                    varA = Document.createelement ("a"); A.href= "javascript:;"; if(I < 10) {a.innerhtml= ' ; } Else{a.innerhtml= ' ;                } face.appendchild (a);            }; }            //Click Insert ExpressionSetTimeout (function() {                varPickers = Face.getelementsbytagname (' A '); varEmojiinput = document.getElementById (' emojiinput '));  for(vari = 0; i < pickers.length; i++) {Pickers[i].onclick=function(e) {document.getElementById (' Emojiinput '). focus ();Inserthtmlatcaret ( This. InnerHTML); //emojiinput.innerhtml+=this.innerhtml;                    }                }                functionInserthtmlatcaret (HTML) {varsel, Range; if(window.getselection) {//IE9 and Non-ieSEL =window.getselection (); if(Sel.getrangeat &&sel.rangecount) {range= Sel.getrangeat (0);                            Range.deletecontents (); //range.createcontextualfragment () would be useful                            //non-standard and not supported in all browsers (IE9, for one)                            varel = document.createelement ("div"); El.innerhtml=html; varFrag =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 < 9Document.selection.createRange (). pastehtml (HTML); }                }            }, 500);

Native JS-written emoji expression selector