Javascript 输入文本中的图像

如何创建一个自定义的输入文本元素，使图像与文本结合在一起

基本上，这些图像是从CDN加载的表情符号

澄清：

---

我希望实现的是一个

元素，它可能包含图像作为输入的一部分。

您必须为这些结果编写自己的WYSIWYG编辑器。或者你可以

简言之：

方法：如果用户输入的每一个文本 匹配微笑的模式，如果微笑匹配，则取回 图像文件夹中相应的.gif文件

请参考以下链接以快速启动。

我希望这有帮助

使用

甚至可以在该字段中复制/粘贴这些图像

您也可以这样做

.inputimage{
    background:#FFFFFF url(left_arrow.gif) no-repeat 4px 4px;
    padding:4px 4px 4px 22px;
    height:18px;
}​

您在该类中的输入类型

<input type="text" name="sample" class="inputimage">​

​

无法在输入中呈现

img

标记，但另一个简单的解决方案是将标记放置为纯文本，并显示在容器中

注意事项：

下面的示例可以扩展为删除整个标记

，尽管现在没有实现

此解决方案之所以存在，是因为出于某些原因，您不想使用@josh crozier所描述的

contenteditable

此解决方案可以使用隐藏的文本输入，在显示器中，您将看到使用虚拟键盘（如智能手机键盘）的结果

在本例中，您可以单击表情符号并将其附加到carret位置，当您单击输入时，光标将转到输入的最后一个位置

var$emoji=$（'.emoji'）；
变量$content=$（'.content'）；
变量$display=$（'.display'）；
var initial='我知道你现在是'；
$content.val（首字母）；
$display.html（$content.val（））；
$emoji.单击（函数（）{
var html=$（this）[0]；
插入文本（html）；
$display.html（$content.val（））；
});
$content.on（'change keyup paste'，function（））{
$display.html（$content.val（））；
});
$content.focus（函数（）{
this.selectionStart=this.selectionEnd=this.value.length；
});
函数insertText（文本）{
var cursorPosition=$content.prop（'selectionStart'）；
var值=$content.val（）；
var textBefore=value.substring（0，光标位置）；
var textAfter=value.substring（光标位置，value.length）；
值=文本前+文本后+文本后；
$content.val（值）；
$content.prop（'selectionStart'，value.length）；
$content.focus（）；
}

。显示{
边框：1px实心#000；
线高：1.4em；
最小高度：20px；
}
.显示图像{
垂直对齐：顶部；
宽度：1.4em
}

选择要插入的表情符号：


结果:
编辑：

在这里，我在contenteditable中的任意位置添加了表情符号

[contenteditable=true] {border: 1px solid #000;margin: 0.4em 0;line-height: 1.4em;-webkit-appearance: textfield;appearance: textfield; }
[contenteditable=true]:empty:before {content: attr(placeholder);display: block; /* For Firefox */}
.selectable-icons img { cursor: pointer;vertical-align: top;max-height: 2.4em;max-width: 2.4em; }

<div  id="content" placeholder="Max 10 char with emoji" class="form-control custom_text" contenteditable="true"></div>

[contenteditable=true]{border:1px solid#000；边距：0.4em 0；行高：1.4em；-webkit外观：textfield；外观：textfield；}
[contenteditable=true]：空：在{content:attr（占位符）之前；显示：block；/*对于Firefox*/}
.可选图标img{光标：指针；垂直对齐：顶部；最大高度：2.4em；最大宽度：2.4em；}

函数粘贴HtmlatCaret（html，选择粘贴内容）{
var-sel，范围；
if（window.getSelection）{
//IE9和非IE
sel=window.getSelection（）；
if（sel.getRangeAt&&sel.rangeCount）{
范围=选择范围（0）；
range.deleteContents（）；
//Range.CreateContexturalFragment（）在这里会很有用，但是
//仅在相对较新的标准化阶段，在中不受支持
//一些浏览器（比如IE9）
var el=document.createElement（“div”）；
el.innerHTML=html；
var frag=document.createDocumentFragment（），节点，lastNode；
while（（node=el.firstChild））{
lastNode=frag.appendChild（节点）；
}
var firstNode=frag.firstChild；
range.insertNode（frag）；
//保留所选内容
如果（最后一个节点）{
range=range.cloneRange（）；
range.setStartAfter（lastNode）；
如果（选择粘贴内容）{
range.setStartBefore（第一个节点）；
}否则{
范围。塌陷（真）；
}
选择removeAllRanges（）；
选择添加范围（范围）；
}
}
}else if（（sel=document.selection）&&sel.type！=“Control”）{
//IE<9
var originalRange=sel.createRange（）；
原始范围。折叠（真）；
sel.createRange（）.pasteHTML（html）；
如果（选择粘贴内容）{
range=sel.createRange（）；
range.setEndPoint（“StartToStart”，原始范围）；
range.select（）；
}
}
}
//Onclick表情符号加载项自定义文本
$（“#选择表情符号a”）。单击（函数（）{
document.getElementsByClassName（'custom_text'）[0].focus（）；
pasteHtmlAtCaret（$（this）.html（），false）；
返回false；
});

一切都从研究开始，然后是反复试验。然后，当你陷入困境时，你会来到这里，提及你尝试过的东西以及失败的地方。然后人们会帮助你。我已经研究过了，但还没有找到符合我需要的结果。我知道WYSIWYG编辑器，但在代码中挖掘可能是一项开销

    function pasteHtmlAtCaret(html, selectPastedContent) {
                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
                        // only relatively recently standardized and is not supported in
                        // some 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);
                        }
                        var firstNode = frag.firstChild;
                        range.insertNode(frag);

                        // Preserve the selection
                        if (lastNode) {
                            range = range.cloneRange();
                            range.setStartAfter(lastNode);
                            if (selectPastedContent) {
                                range.setStartBefore(firstNode);
                            } else {
                                range.collapse(true);
                            }
                            sel.removeAllRanges();
                            sel.addRange(range);
                        }
                    }
                } else if ( (sel = document.selection) && sel.type != "Control") {
                    // IE < 9
                    var originalRange = sel.createRange();
                    originalRange.collapse(true);
                    sel.createRange().pasteHTML(html);
                    if (selectPastedContent) {
                        range = sel.createRange();
                        range.setEndPoint("StartToStart", originalRange);
                        range.select();
                    }
                }
            }
 // Onclick emoji add in custom text
        $('#select-emoji a').click(function() {
            document.getElementsByClassName('custom_text')[0].focus();
            pasteHtmlAtCaret($(this).html(), false);
            return false;
        });