Images inside an input text
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.
Solution 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:   " />
<p>Standard unicode:</p>
<input type="text" value="See: ✔ ☹ ☺" />Solution 2:
It's not posible to render img tag in input, but another simple solution is to place the tag as plain text and display in a container.
Notes:
The example below can be extended to delete an entire tag
<.. />although now is not implemented.This solution exist because, for some reasons you don't want to use
contenteditabledescribed by @josh-crozier,This solution can make use of a hidden text input and in the display you will see the result using a virtual keyboard (like smartphone keyboard).
In this example you can click emoticons and append them at the carret position and when you click on input your cursor go to the last position of 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="" />Solution 3:
You would have to write your own WYSIWYG editor for those results. Or you can Look at this previous Question.
In short:
APPROACH: You have to read each and every text entered by user if it matches the pattern of the smile and if the smiley matches then fetch the respective .gif from the images folder.
Please refer following link for a quick start. Replace a list of Emoticons with their pictures
I hope this helps!
Solution 4:
Here, i have add emoji anywhere in contenteditable.
[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;
});