Question

I have a text box that will input a figure in %. What i want to do is that as the user typesin his digits, a ‘%’ sign should get appended at the end. so if some one types in 1.23, what he should see is :- 1% -> 1.% -> 1.2% -> 1.23%. This is what I have written

$('#price').bind('keyup',function(){
    val1 = $(this).val();
    val2 = val1.substr(0,val1.length-1);
    $(this).val(val2+'%');
});

The problem is the cursor comes in after the % sign appended so after 1% if I type ‘.’ the val1 = “1%.” and the final result is 1%%. Some help please? If you can tell me how to put the cursor before % or some other solution to the original issue. Thanks a bunch

Answer 1

Adding a percent sign to the text field provides a horrible user experience.

You’d better use a background image, or add the percent sign after the textbox, optionally positioning it so that it seems to be placed inside the box.