Put an image inside an input text box

Question

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

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

Text inputs can't contain images, only text. They can have a background image however. — j08691, Apr 30 '15 at 14:34
I think it might be possible using CSS and the 'content' property. — Amine Zaine, Apr 30 '15 at 14:35
I think you should use Textarea instead (one line). Please look on this http://stackoverflow.com/questions/11070830/smilies-to-textarea-on-click — Marcin, Apr 30 '15 at 14:40
The icon should be _outside_ the text field and positioned via CSS to hover the text field. — marekful, Apr 30 '15 at 14:42

score 0 · Answer 1 · answered Apr 30 '15 at 15:07

Set the width and height of the .input_holder to match your text input. This code will overlay the image on top of the text input with css positioning.

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. $(".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>

Put an image inside an input text box

1 Answers1