input文本中的图像
如何创build一个自定义input文本元素，使文本旁边的图像合并？
基本上这些图像是从CDN加载的表情符号。
澄清：
我想实现的是一个<input type="text" />元素，它可能包含图像作为input的一部分。
使用contenteditable元素内的<img>元素：
尽pipe不能直接在<input type="text" />元素中放置<img>元素，但可以使用contenteditable元素并将<img>元素放在其中。
下面是一个在contenteditable元素中使用Twitter的Emoji图像的例子：
[contenteditable] { border: 1px solid #000; line-height: 1.4em; -webkit-appearance: textfield; appearance: textfield } img { vertical-align: top; max-height: 1.4em; max-width: 1.4em; }
<p>This looks like an <code>input</code> element:</p> <div contenteditable="true"> See: <img src="//i.stack.imgur.com/nO2hl.png"/> <img src="//i.stack.imgur.com/iUDpH.png"/> You can even copy/paste these images within this field <img src="//i.stack.imgur.com/QrKSV.png"/> </div>
你将不得不为这些结果编写自己的所见即所得的编辑器。 或者你可以看看以前的这个问题 。
简而言之：
方法：如果用户input的每个文本与笑脸图案匹配，并且如果笑脸符合，则从图像文件夹中获取相应的.gif。
请参考以下链接以获得快速入门。 用他们的图片replace表情符号列表
我希望这有帮助！
在input中渲染img标签是不可能的，但另一个简单的解决scheme是将标签放置为纯文本并显示在容器中。
笔记：
-
下面的例子可以扩展为删除整个标签
<.. />尽pipe现在还没有实现。 -
这个解决scheme的存在是因为， 由于某些原因你不想使用@ josh-crozier描述的
contenteditable， -
这个解决scheme可以使用隐藏文本input，在显示屏中您将使用虚拟键盘 （如智能手机键盘）看到结果。
在这个例子中，你可以点击表情符号，并将它们附加在底座位置，当你点击input时，你的光标就会移到input的最后一个位置。
var $emoji = $('.emoji'); var $content = $('.content'); var $display = $('.display'); var initial = 'I know that you are <img class="emoji" src="//i.stack.imgur.com/iUDpH.png"> now'; $content.val(initial); $display.html($content.val()); $emoji.click(function() { var html = $(this)[0].outerHTML; insertText(html); $display.html($content.val()); }); $content.on('change keyup paste', function(){ $display.html($content.val()); }); $content.focus(function(){ this.selectionStart = this.selectionEnd = this.value.length; }); function insertText(text){ var cursorPosition = $content.prop('selectionStart'); var value = $content.val(); var textBefore = value.substring(0, cursorPosition ); var textAfter = value.substring( cursorPosition, value.length ); value = textBefore + text + textAfter; $content.val(value); $content.prop('selectionStart', value.length); $content.focus(); }
.display { border: 1px solid #000; line-height: 1.4em; min-height: 20px; } .display img { vertical-align: top; width: 1.4em }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> Select emoji to insert: <p> <img class="emoji" src="//i.stack.imgur.com/nO2hl.png"/> <img class="emoji" src="//i.stack.imgur.com/iUDpH.png"/> </p> Result: <div class="display"> </div> Edit: <input type="text" class="content" value="" />
你也可以这样做
.inputimage{ background:#FFFFFF url(left_arrow.gif) no-repeat 4px 4px; padding:4px 4px 4px 22px; height:18px; }
你的inputtypes在那里
<input type="text" name="sample" class="inputimage">
