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">

Why not put the percent sign after the input field and save that part of the hassle? — Pekka, Oct 28 '11 at 18:52
Why do you need the percent sign if you know the number represents a percent? Just take the input without a percent sign and divide it by 100. — Jonathan M, Oct 28 '11 at 18:56
I want put percent sign that user to know this number is a real number. How is it? — JimBo, Oct 28 '11 at 18:59
@JimBo, you don't need the user to enter a percent sign, though. Tell us a bit more of what you're trying to do. Post more of your page. — Jonathan M, Oct 28 '11 at 19:00
I mean put a (permanent, static) percent sign next to the input field instead of painfully adding it into it. — Pekka, Oct 28 '11 at 19:00

score 11 · Accepted Answer · answered Oct 28 '11 at 19:01

11

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.

answered Oct 28 '11 at 19:01

Andy E

338,112
86
474
445

1

in the fiddle there is a maxlength property but not here... so look at the jsfiddle. – Tim Joyce Oct 28 '11 at 19:05
2

Oh, that is _very_ nice. Future work would be to add an `onclick` handler to the `span` that focuses the `input`, and add a numeric-only validation to the `input`. – Lightness Races in Orbit Oct 28 '11 at 19:07
That is what I am looking for – Ryan Mar 14 '18 at 22:04

Roysh · Answer 2 · 2017-10-23T07:26:10.663

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

score 0 · Answer 3 · answered Dec 01 '22 at 17:22

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">

Mask input for number - percent

3 Answers3

Linked