[英]Put an image inside an input text box
I want to add an emoticon on click of emoticon inside an input text box. 我想在输入文本框内单击表情时添加一个表情。
Here is the text box:- 这是文本框:-
<input placeholder="Send message" submit-enter="sendMsg(chat.phone)" id="inputBoxFor{{chat.phone}}">
On click of Emo, this function gets started :- 单击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;
};
What happens is this returns me the following inside the text box :- 这是怎么回事,在文本框中返回以下内容:-
<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>
I want the image to be shown. 我希望显示图像。
Set the width and height of the .input_holder to match your text input. 设置.input_holder的宽度和高度以匹配您的文本输入。 This code will overlay the image on top of the text input with css positioning.
此代码将图像以css位置覆盖在文本输入的顶部。
Start Off with just this: 从这里开始:
<div class="input_holder">
<input placeholder="Send message" submit-enter="sendMsg(chat.phone)" id="inputBoxFor{{chat.phone}}" />
</div>
Use jquery or any method you choose to append the image. 使用jquery或您选择添加图像的任何方法。 $(".input_holder").append(imageVar);
$(“。input_holder”)。append(imageVar); jQuery Append
jQuery追加
<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>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.