将图像放入输入文本框答案

【问题标题】：Put an image inside an input text box将图像放入输入文本框
【发布时间】：2015-04-30 14:33:22
【问题描述】：

我想在输入文本框中单击表情符号时添加一个表情符号。

这是文本框：-

<input placeholder="Send message" submit-enter="sendMsg(chat.phone)" id="inputBoxFor{{chat.phone}}">

点击 Emo，这个功能就开始了：-

$scope.addEmoticon=function(index){
    $scope.trial = emoticonTexts[index].replace(emoticonRegex, function(match) {
            return textToEmoticon[match]?'<div><img src="'+window.location.protocol+"//"+window.location.hostname+":"+window.location.port+"/"+emoticonDirPath+textToEmoticon[match]+'" class="emoticons_small"/></div>' : match;
    });
    return $scope.textInput[$scope.chatInFocus.phone]+=$scope.hemank;   

};

这会在文本框中返回以下内容：-

<div><img src="http://localhost:9090//img/emoticons/emo_im_30_angry.png" class="emoticons_small"/></div><div><img src="http://localhost:9090//img/emoticons/emo_im_30_angry.png" class="emoticons_small"/></div>

我希望显示图像。

【问题讨论】：

文本输入不能包含图像，只能包含文本。但是，它们可以有背景图像。
我认为可以使用 CSS 和 'content' 属性。
我认为你应该使用 Textarea 代替（一行）。请看这个stackoverflow.com/questions/11070830/…
图标应该在文本字段的外部，并通过 CSS 定位以悬停文本字段。

标签： javascript html

【解决方案1】：

设置 .input_holder 的宽度和高度以匹配您的文本输入。此代码将使用 css 定位将图像覆盖在文本输入的顶部。

从这里开始：

<div class="input_holder">
    <input placeholder="Send message" submit-enter="sendMsg(chat.phone)" id="inputBoxFor{{chat.phone}}" />
</div>

使用 jquery 或您选择的任何方法来附加图像。 $(".input_holder").append(imageVar); jQuery Append

<style>
.input_holder {
    position: relative;
    width: 500px;
    height: 25px;
}
.input_holder div {
    position: absolute;
    top: 0px;
    right: 0px;
}
</style>
<div class="input_holder">
    <input placeholder="Send message" submit-enter="sendMsg(chat.phone)" id="inputBoxFor{{chat.phone}}" />
    <div><img src="http://localhost:9090//img/emoticons/emo_im_30_angry.png" class="emoticons_small"/></div>
</div>

【讨论】：