# Fix a character to text input box using javascript/jquery

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 • How to get all values from inputs with same name but different index via Jquery • Optional character in input mask • Want to bind an input field to a jquery-ui slider handle • Change input value with Javascript • How to get the text input content width using javaScript or jquery • Detect when “cursor position inside input change” in jQuery? • Copy radio value using its ID to insert into input as value using JavaScript • MathJax Rendering HTML input fields in MathML • Javascript - User input through HTML input tag to set a Javascript variable? • How to show alert for duplicated value of textbox • javascript: changing the name attribute dynamically • jquery show input Search Results • ### 5 Solutions collect form web for “Fix a character to text input box using javascript/jquery” 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”. ## CSS: <style type=&quot;text/css&quot; 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=&quot;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! 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$).

I too have been looking at different solutions for this. Using css to indent the text with padding and putting a background image in that position is your best bet.

I did it like this:

$('#price').keypress(function(event) { var code = (event.keyCode ? event.keyCode : event.which); if ($(this).val().indexOf('$') === -1){ document.getElementById("price").value = "$" + $(this).val(); } else { document.getElementById("price").value =$(this).val();
}
});


with <input type="text" id="price">.

User can remove the dollar sign manually though if he/she wants to.