Fix a character to text input box using javascript/jquery
Solution 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.
Solution 2
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".
CSS:
<style type="text/css" media="screen">
.cost{
position: relative;
left: 20px;
}
input.cost{
padding-left: 24px;
}
</style>
jQuery:
<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!
Eddie
Updated on June 15, 2022Comments
-
Eddie almost 2 years
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