Изображения внутри текста ввода

Ответ 1

Использование <img> элементов внутри элемента contenteditable:

Пока невозможно разместить <img> элементы внутри элементов <input type="text" />, вы можете добиться чего-то подобного, используя элемент contenteditable и помещая в него элемент <img>.

Вот пример использования Twitter изображений Emoji внутри элемента 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>

Ответ 2

Вам нужно будет написать собственный редактор WYSIWYG для этих результатов. Или вы можете Посмотрите на этот предыдущий вопрос.

Короче:

ПОДХОД: Вы должны прочитать каждый текст, введенный пользователем, если он соответствует шаблону улыбки, и если смайлик совпадает, то выборка соответствующий .gif из папки с изображениями.

Пожалуйста, обратитесь к следующей ссылке для быстрого запуска.  Заменить список смайликов своими фотографиями

Надеюсь, это поможет!

Ответ 3

Невозможно отобразить тег img во входе, но другое простое решение - разместить тег как обычный текст и отобразить в контейнере.

Примечания:

• Приведенный ниже пример можно расширить, чтобы удалить весь тег <.. />, хотя теперь он не реализован.

• Это решение существует, потому что по некоторым причинам вы не хотите использовать contenteditable, описанный @josh-crozier,

• Это решение может использовать текстовый ввод скрытый, и на дисплее вы увидите результат с помощью виртуальной клавиатуры (например, клавиатуры смартфона).

В этом примере вы можете щелкнуть смайлики и добавить их в позицию carret, а когда вы нажмете на ввод курсора, перейдите к последней позиции ввода.

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

Ответ 4

Вы также можете сделать это таким образом

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