Fix a character to text input box using javascript/jquery

javascript text input user-input
Eddie picture Eddie · Feb 7, 2010 · Viewed 16.2k times · Source

I am looking for a way to 'fix' a dollar symbol $ to a text input box eg <input type="text" value="$" /> but make it not possible for the default value to be removed, so that whatever the user inputs, there is always a $ symbol 'prepending' input.

Cheers

Answer

Pekka picture Pekka · Feb 7, 2010

There is the possibility of a background-image but it's difficult to maintain, and doesn't react to font size changes, which makes it the less optimal choice IMO.

A better way in my opionion would be:

  • Put a <span>$</span> next to the input (before it, actually).

  • give it position: relative; left: 20px.

  • The $ sign then moves into the input field.

  • Then, give the input field padding-left: 24px.

  • Voilá! The $ sign is in the input field, does not obscure anything, and cannot be removed.

Related questions

How to get an input text value in JavaScript

How go get an input text value in JavaScript? <script language="javascript" type="text/javascript"> lol = document.getElementById('lolz').value; function kk(){ alert(lol); } </script> <body> <input type="text" name="enter" class="enter" …

Read More
How do you make just some text, inside an input text field, bold?

I'm trying to get bold specific text, inside an input text field. I'm not sure how to go about it since html code isn't interpreted inside a text field, so anything like <b> won't work. Is it possible …

Read More
Disabled Text Input with onclick

I need a way of capturing onclick, for a text input that is disabled. I would prefer not to use jQuery, but if there was no javascript alternative, would use it. Thanks in advance EDIT: I have tried simply adding …

Read More