Mask input for number - percent

Question

How can create a mask input for number that have percent by jQuery? Do I make input just accept until three numbers and put percent sign after numbers while user finished typing(keyup)?

I don't use plugins.

Example: 1% Or 30% Or 99% Or 100% Or 200%

<input name="number" class="num_percent">

Answer 1

You're better off not using JavaScript for this. Besides the problems that come with using onkeyup for detecting text input, you also have the hassle of parsing the resulting string back to a number in your client/server scripts. If you want the percent sign to look integrated, you could do something like this:

<div class="percentInput">
    <input type="text" name="number" class="num_percent">
    <span>%</span>
</div>

.percentInput { position:relative; }
.percentInput span { position: absolute; right: 4px; top:2px; }
.num_percent { text-align: right; padding-right: 12px; }

http://jsfiddle.net/BvVq4/

I'm rushing slightly, so you may have to tweak the styles to get it to look right cross-browser. At least it gives you the general idea.