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.

Answer 2

I've stayed with input number, moved the percentage char and then modified its position according to the length of the input (the amount of digits).

HTML

<input type="number" min="0" max="100" value="100"> //chose 100 only for the sake of the example
<span class="percentage-char">%</span> 

CSS

input {
  width: 55px;
  height: 20px;
  font-size:18px;
}
.percentage-char {
  position: absolute;
  left: 32px; // default position - in this case 100
  top: 1px;
  font-size: 18px; 
}
.one-digit { //position of the '%' when input is 0-9
  left: 13px;
}
.two-digits{ //position of the '%' when input is 10-99
  left: 24px;
}

JS

$(":input").change(function() { //listening to changes on input
   if ($(this).val() < 10) { //adding and removing the classes
        $('.percentage-char').removeClass('two-digits');
        $('.percentage-char').addClass('one-digit');
   } else if ($(this).val() > 9 && $(this).val() < 100) {
        $('.percentage-char').addClass('two-digits');
   } else {
        $('.percentage-char').removeClass('one-digit two-digits');
   }
});

Check out this fiddle

Answer 3

 function setPercentageMask() { let input = $('.percent'); input.mask('##0,00', {reverse: true}); input.bind("change keyup", function() { isBetweenPercentage($(this)); }); } function isBetweenPercentage(input) { let myNumber = (input.val())? parseFloat(input.val()): 0; (myNumber.isBetween(0, 100.00))? myNumber: input.val('100,00'); } if (typeof(Number.prototype.isBetween) === "undefined") { Number.prototype.isBetween = function(min, max, notBoundaries) { var between = false; if (notBoundaries) { if ((this < max) && (this > min)) between = true; } else { if ((this <= max) && (this >= min)) between = true; } return between; } } setPercentageMask();

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.mask/1.14.16/jquery.mask.min.js" integrity="sha512-pHVGpX7F/27yZ0ISY+VVjyULApbDlD0/X0rgGbTqCE7WFW5MezNTWG/dnhtbBuICzsd0WQPgpE4REBLv+UqChw==" crossorigin="anonymous" referrerpolicy="no-referrer"></script> <input name="text" class="percent">