How to restrict user input character length of HTML5 input type=“number”?

问题

How do I restrict user input to a given length in an HTML5 input[type=number] textbox?

the answers to

How can I limit possible inputs in a HTML5 "number" element?

do not handle illegal inputs

<input class="quantity" type="number" min="0" max="99999" maxlength="5" />

$("quantity").keyup(function(){
    var $field = $(this);
    if ($field.val().length > Number($field.attr("maxlength"))) {
        var value = $field.val().slice(0, 5);
        $field.val(value);
    }
});

I know the maxlength attribute is not supported, but I use it to obtain the given length.

The above code works fine in firefox, but in chrome and safari it works only if I input five "VALID" characters. When I start typing any invalid characters, e.g. "a", "b" etc., I am able to type in more letters and the textbox color changes to red.

I found that when the input becomes invalid the $field.val() returns always empty string and the $field.val().length returns 0.

I even tried converting the keyCode to character intended to input and store it in a "data-value" attribute to the input box to check against and overwrite the value of the input but it didn't seem to be reliable.

Is there any solution with which I can make the input[type=number] behave same as input[type=text][maxlength=5]?

回答1:

Here is my suggestion after testing a few things

it handles more than one field with the quantity class
it handles illegal input where supported
initialises by storing all defaultValues of the fields with the class
handles a weirdness with .index()
works in IE<10 too
tested in Safari 5.1 on Windows - it reacted to the is(":invalid") which however is invalid in IE8

Live Demo

var inputQuantity = [];
$(function() {
  $(".quantity").each(function(i) {
    inputQuantity[i]=this.defaultValue;
     $(this).data("idx",i); // save this field's index to access later
  });
  $(".quantity").on("keyup", function (e) {
    var $field = $(this),
        val=this.value,
        $thisIndex=parseInt($field.data("idx"),10); // retrieve the index
    // NOTE :invalid pseudo selector is not valid in IE8 so MUST be last
    if (this.validity && this.validity.badInput || isNaN(val) || $field.is(":invalid") ) { 
        this.value = inputQuantity[$thisIndex];
        return;
    } 
    if (val.length > Number($field.attr("maxlength"))) {
      val=val.slice(0, 5);
      $field.val(val);
    }
    inputQuantity[$thisIndex]=val;
  });      
});

回答2:

I don't know my answer is useful for you? But i happy if i can help you. you should write a js method and then use it in your html page.

function limit(element) {
  var max_chars = 2;

  if(element.value.length > max_chars) {
    element.value = element.value.substr(0, max_chars);
  }
}


<input type="number" onkey ="limit(this);" onkeyup="limit(this);">

回答3:

Since there is no uniform support for HTML5 input types I suggest using this script template until all browsers will support them.

$(".quantity").each(function() {
    $(this).attr("type", "text")
    var min = $(this).attr("min");
    var max = $(this).attr("max");
    $(this).removeAttr("min").removeAttr("max");
    $(this).keyup(function(){
        var $field = $(this);
        if ($field.val().length > Number($field.attr("maxlength"))) {
            var value = $field.val().slice(0, 5);
            //   add js integer validation here using min and max
            $field.val(value);
        }
    });
});

Then we can simply leave HTML5 elements untouched

回答4:

to dynamically set max limit

function limit(element,max_chars) {

  if(element.value.length > max_chars) {
    element.value = element.value.substr(0, max_chars);
  }
}


<input type="number" onkey ="limit(this);" onkeyup="limit(this,2);">

来源：https://stackoverflow.com/questions/18104094/how-to-restrict-user-input-character-length-of-html5-input-type-number

标签

jquery

html5

validation

user-input