Images inside an input text

Question

How do I create a custom input text element which enables combining images alongside the text?

Basically those images are emoticons loaded from a CDN.

CLARIFICATION:
What I wish to implement is an <input type="text" /> element which may contain images as part of the input.

Answer 1

Using <img> elements inside of a contenteditable element:

While it's not directly possible to place <img> elements inside of <input type="text" /> elements, you can achieve something similar by using a contenteditable element and placing the <img> element inside of that.

Here is an example using Twitter's Emoji images inside of a contenteditable element:

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

You could also add in some JavaScript to dynamically insert the image/icon into the field. If you want to get fancy, you could insert the image at the position of the caret.

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>

---

Using unicode inside of an <input> element:

If that's not feasible, you would have to use unicode characters. That's how the Emoji characters work on iOS and Android devices.

For instance, you can use Font Awesome unicode characters within an <input> element. Likewise, you could make your own library of icons/images and represent them with unicode characters:

<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;" />