I am trying to include an img tag inside an input's value attribute. I would like something like this using jquery:

<input type="text" value="Lorem Impsum <img src='...'/>" />

I already tried this:

jQuery(document).ready(function() { 
     productinput = jQuery('input[value=product]');
     productinput.val(data.selectedData.value + '<img style="width:128px" src="' + data.selectedData.imageSrc + '" />');
});     

but it's not working. So, does anyone know how I can do this?

Note: it is an image inside the value.

I am trying to include an img tag inside an input's value attribute. I would like something like this using jquery:

<input type="text" value="Lorem Impsum <img src='...'/>" />

I already tried this:

jQuery(document).ready(function() { 
     productinput = jQuery('input[value=product]');
     productinput.val(data.selectedData.value + '<img style="width:128px" src="' + data.selectedData.imageSrc + '" />');
});     

but it's not working. So, does anyone know how I can do this?

Note: it is an image inside the value.

• javascript
• jquery
• html

Share Improve this question Follow edited Jan 27, 2016 at 14:58 wpercy 10.1k44 gold badges3434 silver badges4949 bronze badges asked Jan 27, 2016 at 11:00 KelyaneKelyane 46722 gold badges77 silver badges1919 bronze badges 3

• why do you need to use image like this? – Parth Trivedi Commented Jan 27, 2016 at 11:02
• I would say that's not valid HTML? – mnille Commented Jan 27, 2016 at 11:03
• The img tag would not be parsed, it's a string in this context. So unless you want to send this input's value to server and save it somewhere, you can't do this – Adam Azad Commented Jan 27, 2016 at 11:05

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 1

You can set the image by putting image as the background of the element

For example

html

<input type="text" value="Lorem Impsum" class="default" />

css

input.default{
       background: url('../images/any.jpg') 0 0 no-repeat;
    }

You can set the css of the element using jquery on document ready.

You should set the type to image.

<input type="image" name="image" src="image.png" width="50">

Try to read doc: Mozilla documentation input/image

Try using the attribute "contenteditable" on a div

<div contenteditable> Lorem ipsum.. <img src='..'> </div>