输入文本内的图像

时间：2015-04-11 15:25:27

标签： javascript jquery html css

如何创建自定义输入文本元素，以便将图像与文本组合在一起？

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

澄清：
我希望实现的是<input type="text" />元素，可以包含图像作为输入的一部分。

5 个答案:

答案 0 :(得分：74)

使用contenteditable element内的<img>元素：

虽然不能直接在<img>元素中放置<input type="text" />个元素，但您可以通过使用contenteditable element并将<img>元素置于其中来实现类似的功能

以下是在contenteditable元素中使用Twitter's Emoji images的示例：

[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>

您还可以添加一些JavaScript，以便将图像/图标动态插入到字段中。如果你想获得幻想，可以将图像插入插入符号的位置。

document.querySelector('.selectable-icons').addEventListener('click', function(e) {
  if (e.target.tagName.toLowerCase() === 'img') {
    document.querySelector('[contenteditable]').appendChild(e.target.cloneNode(true));
  }
});
[contenteditable] {
  border: 1px solid #000;
  margin: 0.4em 0;
  line-height: 1.4em;
  -webkit-appearance: textfield;
  appearance: textfield;
}
img {
  vertical-align: top;
  max-height: 1.4em;
  max-width: 1.4em;
}
.selectable-icons img {
  cursor: pointer;
}
<p>Just click on an icon to add it.</p>

<div class="custom-input">
  <div class="selectable-icons">
    <img src="//i.stack.imgur.com/nO2hl.png" /><img src="//i.stack.imgur.com/IkjJW.png" /><img src="//i.stack.imgur.com/QrKSV.png" /><img src="//i.stack.imgur.com/sZpOK.png" /><img src="//i.stack.imgur.com/d7HIy.png" /><img src="//i.stack.imgur.com/iUDpH.png" /><img src="//i.stack.imgur.com/IjpTt.png" /><img src="//i.stack.imgur.com/rDCTA.png" /><img src="//i.stack.imgur.com/YtkL1.png" /><img src="//i.stack.imgur.com/wPXCd.png" />
  </div>
  <div contenteditable="true">
    You can type here. Add an icon.
  </div>
</div>

在<input>元素中使用unicode：

如果这不可行，则必须使用unicode字符。这就是Emoji characters在iOS和Android设备上的工作方式。

例如，您可以在<input>元素中使用Font Awesome个unicode字符。同样，您可以创建自己的图标/图像库，并使用unicode字符表示它们：

<link href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css" rel="stylesheet"/>

<p>Font awesome icons (unicode):</p>
<input type="text" class="fa" value="See: &#xf179; &#xf118; &#xf16c;" />


<p>Standard unicode:</p>
<input type="text" value="See: &#x2714; &#x2639; &#x263a;" />

答案 1 :(得分：3)

在输入中呈现img标记是不可行的，但另一个简单的解决方案是将标记放置为纯文本并显示在容器中。

注意：

  1. 以下示例可以扩展为删除整个代码<.. />，但现在尚未实施。

  2. 此解决方案的存在是因为由于某些原因您不希望使用@ josh-crozier描述的contenteditable，

  3. 此解决方案可以使用隐藏文本输入，在显示屏中，您将使用虚拟键盘（如智能手机键盘）查看结果。< / p>

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

    ＆＃13;
    ＆＃13; 
    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();
}
    ＆＃13; 
    .display {
  border: 1px solid #000;
  line-height: 1.4em;
   min-height: 20px;
}
.display img {
  vertical-align: top;
  width: 1.4em
}
    ＆＃13; 
    <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="" />
    ＆＃13;
    ＆＃13;
    ＆＃13;

答案 2 :(得分：2)

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

简而言之：

  

方法：您必须阅读用户输入的每个文本（如果有）   匹配微笑的模式，如果笑脸匹配，则获取   来自images文件夹的相应.gif文件。

     

请参阅以下链接以便快速入门。    Replace a list of Emoticons with their pictures

我希望这有帮助！

答案 3 :(得分：1)

你也可以这样做

.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">​

答案 4 :(得分：1)

在这里，我已经在可编辑内容的任何地方添加了表情符号。

[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>

    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;
        });
相关问题
最新问题