To insert image in the textbox.

Question

5.00/5 (1 vote)

See more:

Hi,

I want to know if it is possible to display an image in the textbox?
If yes then how to implement it in using javascript?

Thanks!
Archana

Posted 24-Jul-12 1:24am

archies_gall

Add a Solution

2 solutions

Solution 2

Hi,
Try visiting the links below:
http://www.dreamincode.net/forums/topic/31007-urgent-displaying-images-in-textbox/[^]
http://stackoverflow.com/questions/5496372/displaying-image-in-text-box[^]
http://stackoverflow.com/questions/1712163/show-image-after-textbox[^]

Let me know if it helps.

--Amit

Posted 24-Jul-12 1:30am

_Amy

Comments

StianSandberg 24-Jul-12 7:36am

your first link is for windows forms.
your third link is not in the textbox, but aside.
And your second link is the same solution as mine..

_Amy 24-Jul-12 7:39am

Ha-ha. Thanks. I din't tested that. Sorry..

Member 11160383 14-Nov-14 22:30pm

how to upload image on text area as a application form

Add a Solution

Add your solution here

Treat my content as plain text, not as HTML

Preview 0

…

Existing Members

Sign in to your account

...or Join us

Download, Vote, Comment, Publish.

Your Email
Password
Forgot your password?

Your Email
This email is in use. Do you need your password?
Optional Password

I have read and agree to the Terms of Service and Privacy Policy
Please subscribe me to the CodeProject newsletters

When answering a question please:

Read the question carefully.
Understand that English isn't everyone's first language so be lenient of bad spelling and grammar.
If a question is poorly phrased then either ask for clarification, ignore it, or edit the question and fix the problem. Insults are not welcome.
Don't tell someone to read the manual. Chances are they have and don't get it. Provide an answer or move on to the next question.

Let's work to help developers, not make them feel stupid.

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

StianSandberg · Accepted Answer · 2012-07-24T01:27:00

Solution 1

You can use css for this. Set a background-image.

HTML

<input type="text" style="background-image: url(/Content/Icons/16/address_book.png);"/>

If you want a small image at the left side (like a search icon for a search box) then add a no-repeat and some padding to make the text be placed beside the image. (in this example I've used a 16x16px image)

HTML

<input type="text" style="background-image: url(/Content/Icons/16/address_book.png); background-repeat: no-repeat;  padding-left: 16px;"/>

Now you will have a nice textbox with a background icon and the text will not be placed over the icon.

Posted 24-Jul-12 1:27am

StianSandberg

Updated 24-Jul-12 1:30am

v2

Comments

archies_gall 24-Jul-12 7:38am

How can i specify image height and width?

StianSandberg 24-Jul-12 7:41am

Yes. You can use css3 "background-size: 10px 10px;" But this is css3 and is not compatible with old browsers. You should not scale images on client anyway.
So my suggestion is to create an image in the right size..

More info about background-size here: http://www.css3.info/preview/background-size/

archies_gall 24-Jul-12 13:57pm

This is for simple text box.
What if i have below scenario:
Web page is divided into 4 frames. Each frame has a text box,image and button. When i click on button in frame1 then information about the frame no. and image should be displayed in the text box.
I am able to get the frame no. in text box but dont know how to display image in textbox on click of button using frames.

Thanks