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是将标签放置为纯文本并显示在容器中。

笔记:

  1. 下面的例子可以扩展为删除整个标签<.. />尽pipe现在还没有实现。

  2. 这个解决scheme的存在是因为, 由于某些原因你不想使用@ josh-crozier描述的contenteditable

  3. 这个解决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">​