我想在输入文本框内点击表情符号时添加表情符号。
这是文本框: -
<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>
我想要显示图像。
答案 0 :(得分:0)
设置.input_holder的宽度和高度以匹配您的文本输入。此代码将使用css定位将图像覆盖在文本输入的顶部。
开始时只有这个:
<div class="input_holder">
<input placeholder="Send message" submit-enter="sendMsg(chat.phone)" id="inputBoxFor{{chat.phone}}" />
</div>
使用jquery或您选择附加图像的任何方法。 $( “input_holder”)追加(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>