Fix a character to text input box using javascript/jquery

Question

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 1

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.

Answer 2

Is this as a visual effect only? If yes you could apply that with CSS as a background image on the input.

Afterwards, on the server, you can do whatever you want with the value (e.g prepend it with $).

Answer 3

You can do this with http://digitalbush.com/projects/masked-input-plugin/ using for example:

$('#input').mask('$999.99');