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: Use the jQuery val() Method You can simply use the jQuery val() method to set the value of an input text box.
To set the maximum character limit in input field, we use <input> maxlength attribute. This attribute is used to specify the maximum number of characters enters into the <input> element. To set the minimum character limit in input field, we use <input> minlength attribute.
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.
Expanding on Pekka's answer, I used this on my page, but I automated it a little bit with jQuery. So for this example, all of the input fields that I want to put a $ symbol in, I give them a class of "cost".
<style type="text/css" media="screen">
.cost{
position: relative;
left: 20px;
}
input.cost{
padding-left: 24px;
}
</style>
<script type="text/javascript">
$(document).ready(function(){
$("#lcce form input.cost").wrap('<div class="cost">');
$("#lcce form input.cost").before('<span class="cost"></span>');
});
</script/>
This will place the span with a class of "cost" right before your input, and also wrap a div around both the input, and the span, so they are ensured to be on the same line.
If you don't have jQuery, you can get it from: jQuery.com
Now I've got a quick question - I noticed that with this styling, in IE6,7, and 8, the $ symbol is not lined up correctly. Does anybody out there have a fix for this?
Thank you!
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With