javascript - 将图像放入输入文本框内

Question

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

这是文本框:-

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

我想要显示图像。

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