Jak ograniczyć liczbę znaków, które można wprowadzić w polu wprowadzania numeru HTML5 na iPhone'ie

Question

Wygląda na to, że żaden z atrybutów HTML "maxlength", "min" lub "max" nie ma pożądanego wpływu na iPhone'a dla następujących znaczników:

<input type="number" maxlength="2" min="0" max="99"/> 

Zamiast ograniczenie liczby cyfr lub wartość wprowadzony numer, numer jest tylko w lewo, jak to zostało wpisane na iPhone 4. to markup działa na większości telefonów innych testowanych.

Co daje?

Jakiekolwiek obejścia?

Jeśli chodzi o rozwiązanie, używamy jQuery mobile.

Dzięki!

Answer 1

Przykład

JS

function limit(element) 
{ 
    var max_chars = 2; 

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

HTML

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

Jeśli jQuery można uporządkować JavaScript trochę:

JS

var max_chars = 2; 

$('#input').keydown(function(e){ 
    if ($(this).val().length >= max_chars) { 
     $(this).val($(this).val().substr(0, max_chars)); 
    } 
}); 

$('#input').keyup(function(e){ 
    if ($(this).val().length >= max_chars) { 
     $(this).val($(this).val().substr(0, max_chars)); 
    } 
}); 

HTML

<input type="number" id="input"> 

Answer 2

Według MDN, maxlength nie jest używane dla number s. Czy próbowałeś tylko:

<input type="number" min="0" max="99" /> 

LUB

<input type="range" min="0" max="99" /> 

Answer 3

jak Andrew powiedział, trzeba zmienić typ do zakresu, poza tym, że będziesz mieć problemy z IE i FF i prawdopodobnie starej przeglądarce ipad bo pochodzi z HTML 5 i jest "Kind New". Spójrz na tego człowieka, który próbuje zakres z JS, Specify range of numbers to input in number field using javascript

Answer 4

Można użyć JavaScript, aby sprawdzić, ile znaków znajduje się w oknie, a jeśli jest ich zbyt wiele, wyjmij jeden: http://www.webcodingtech.com/javascript/limit-input-text.php

Answer 5

Wiem, że to pytanie jest jedna lat, ale nie pr efer wybraną odpowiedź. Ponieważ sposób jego działania polega na tym, że pokazuje on wpisaną postać, a następnie ją usuwa.

W przeciwieństwie do tego, zaproponuję inny sposób, który jest podobny do Will'a, jest po prostu lepszy w sposobie, w którym zapobiega wyświetlaniu postaci. Dodałem również blok else if, aby sprawdzić, czy znak jest liczbą, a następnie jest to dobra funkcja do sprawdzania poprawności pól liczbowych.

HTML

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

JS

function limit(element) 
{ 
    var max_chars = 2; 
    if (arguments[1].char !== "\b" && arguments[1].key !== "Left" && arguments[1].key !== "Right") { 
     if (element.value.length >= max_chars) { 
      return false; 
     } else if (isNaN(arguments[1].char)) { 
      return false; 
     } 
    } 
} 

Answer 6

Tutaj bardziej zoptymalizowana wersja jQuery że buforuje selektorów. Używa również atrybutu maxlength, który nie jest obsługiwany przez numer typu wejścia.

// limits the input based on the maxlength attribute, this is by default no supported by input type number 
$("input[type=number]").on('keydown keyup',function(){ 
    var $that = $(this), 
    maxlength = $that.attr('maxlength') 
    if($.isNumeric(maxlength)){ 
     $that.val($that.val().substr(0, maxlength)); 
    }; 
}); 

Answer 7

Sprawdź to, działa dla mnie;

Is there a minlength validation attribute in HTML5?

Answer 8

Inną opcją z jQuery, ale onkeypress wydarzenie ...;)

$("input[type=number]").on('keypress',function(e) { 
    var $that = $(this), 
    maxlength = $that.attr('maxlength') 
    if($.isNumeric(maxlength)){ 
     if($that.val().length == maxlength) { e.preventDefault(); return; } 

     $that.val($that.val().substr(0, maxlength)); 
    }; 
}); 

Answer 9

można użyć tego kodu:

<input type="number" maxlength="2" min="0" max="99" 
     onkeypress="limitKeypress(event,this.value,2)"/> 

i kodu js :

function limitKeypress(event, value, maxLength) { 
    if (value != undefined && value.toString().length >= maxLength) { 
     event.preventDefault(); 
    } 
} 

Answer 10

To jest odpowiedź Tripex zoptymalizowana pod kątem dopuszczenia klawisza Delete, działa przy pisaniu i wklejaniu.

$(document).on("keyup", "#your_element", function(e) { 
    var $that = $(this), 
    maxlength = $that.attr('maxlength'); 
    if ($.isNumeric(maxlength)){ 
     if($that.val().length === maxlength) { 
      e.preventDefault(); 
      // If keyCode is not delete key 
      if (e.keyCode !== 64) { 
       return; 
      } 
     } 
     $that.val($that.val().substr(0, maxlength)); 
    } 
});