javascript - 输入文本中的图像

Question

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

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

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

Answer 1

使用<img> contenteditable element 中的元素:

虽然不能直接放置 <img> <input type="text" /> 中的元素元素，您可以使用 contenteditable element 实现类似的效果并放置 <img>里面的元素。

这是一个使用 Twitter's Emoji images 的例子在 contenteditable 里面元素:

[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 设备。

例如，您可以使用 Font Awesome <input> 中的 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;" />