Images inside an input text

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:

  1. The example below can be extended to delete an entire tag <.. /> although now is not implemented.

  2. This solution exist because, for some reasons you don't want to use contenteditable described by @josh-crozier,

  3. 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="" />

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!


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

Tags:

Javascript

Html

Css

Jquery

Recent Posts