笔者写这玩意找过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);
时间： 2024-07-31 16:48:38