CODEWITHSUNDEEP
jquery
Ibrahim Azhar Armar
Ibrahim Azhar Armar

Reputation: 25763

Disallow user to enter any value apart from 1 to 999 including decimals

I want to allow user to enter value from 1 to 999 in the input box

I tried the following

<input name="quantity" class="numbers" value=""/>

$('.numbers').keypress(function (e) {
    var value = parseInt($(this).val());
    if (value <= 0 || value > 999) {
        return false;
    }
    if (e.which != 8 && e.which != 0 && (e.which < 48 || e.which > 57)) {
        return false;
    }
});

This does not work, when i enter zero value, i am stuck, here is the link to fiddle https://jsfiddle.net/kcet86s8/4/

Where am i going wrong ?

Upvotes: 2

Views: 266

Answers (3)

teddy
teddy

Reputation: 534

You should add this to your question, for clear.

disallow user to enter any value apart from 1 to 999 including decimals

Your problem is: you want to restrict user input, which depend to the inputed value. But the "keypress" event is fire before the value updated, therefore the value you get is the old value, not the new one(that's easy to check this out)

And the problem in your requirement is you can't get the new value before the input updated, atleast jquery can't do that. So you can't restrict user input at "keypress".

In other way, you can use "keyup". Then revert last value if user input wrong value. .i.e: https://jsfiddle.net/kcet86s8/7/

$(document).ready(function () {
  $.myval = $('.numbers').val();
    $('.numbers').keyup(function (e) {
        var value = parseInt($(this).val());
        if (value <= 0 || value > 999) {
        $(this).val($.myval);
            return false;
        }
        if ((e.which != 8 && e.which != 0 && (e.which < 48 || e.which > 57))) {
        $(this).val($.myval);
            return false;
        }
      $.myval = $(this).val();
    });
});

User still can sees the input value before it have been reverted. I think it's not perfect but the only way.

Update keycode condition to enable numpad input, as @Midas suggested: https://jsfiddle.net/kcet86s8/10/

$(document).ready(function () {
  $.myval = $('.numbers').val();
    $('.numbers').keyup(function (e) {
        var value = parseInt($(this).val());
        if (value <= 0 || value > 999) {
        $(this).val($.myval);
            return false;
        }
        if (e.which != 8 && e.which != 0 && !(e.which >= 48 && e.which <= 57) && !(e.which >= 96 && e.which <= 105)) {
        $(this).val($.myval);
            return false;
        }
      $.myval = $(this).val();
    });
});

Upvotes: 3

guest271314
guest271314

Reputation: 1

You can use <input type="number"> element, input event String.prototype.slice() with parameters 0, -1 to remove last character of input value substituting valueAsNumber property for parseInt() if false at first if condition

$(document).ready(function() {
  $(".numbers").on("input", function(e) {
    var value = this.valueAsNumber;
    if (value <= 0 || value > 999) {
      this.value = this.value.slice(0, -1);
    }
    // if (e.which != 8 && e.which != 0 && (e.which < 48 || e.which > 57)) {
    //     return false;
    // }
  });
});
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js">
</script>
<input name="quantity" type="number" class="numbers" value="" />

jsfiddle https://jsfiddle.net/kcet86s8/5/

Upvotes: 3

Midas
Midas

Reputation: 7131

You can use <input type="number"> which has a min and max attribute:

<input type="number" min="1" max="999" value="1">

Browser support

Upvotes: 2

Related Questions