HTML text input field with currency symbol

Question

Hello,

I would like to have a text input field containing the "$" sign in the very beginning, and no matter what editing occurs to the field, for the sign to be persistent.

I would be good if only numbers were accepted for input but that's just a fancy addition.

Thank you very much in advance!

Answer 1

 $<input name="currency">

See also: Restricting input to textbox: allowing only numbers and decimal point

Answer 2

Put the '$' in front of the text input field, instead of inside it. It makes validation for numeric data a lot easier because you don't have to parse out the '$' after submit.

You can, with JQuery.validate() (or other), add some client-side validation rules that handle currency. That would allow you to have the '$' inside the input field. But you still have to do server-side validation for security and that puts you back in the position of having to remove the '$'.

Answer 3

Consider simulating an input field with a fixed prefix or suffix using a span with a border around a borderless input field:

<span class="currencyinput">$<input type="text" name="currency"></span>

with

.currencyinput {
    border: 2px inset #ccc;
}
.currencyinput input {
    border: 0;
}