Chcę ograniczyć wprowadzanie danych przez użytkownika do liczb dodatnich w formularzu HTML.Zapobieganie negatywnym wejściom w typie wprowadzania danych = "liczba"?
Wiem, że można ustawić min = "0", można jednak ominąć to ręcznie, wprowadzając liczbę ujemną.
Czy istnieje inny sposób rozwiązania tego problemu bez pisania funkcji sprawdzania poprawności?
Nie jest to możliwe bez sprawdzania wartości na wejściu.
input type=number
Element input z atrybutem type, którego wartość jest „numer” reprezentuje precyzyjną kontrolę za ustalenie wartości tego elementu do ciąg reprezentujący liczbę.
Ponieważ jest to ciąg reprezentujący liczbę, nie ma żadnej możliwości upewnienia się, że ciąg znaków może reprezentować wartości liczbowe, lub nie.
Dopuszczalne atrybuty nie dają możliwości sprawdzenia poprawności wartości kontrolki wprowadzania liczb.
Jeden sposób na to przy pomocy JavaScript może wyglądać tak.
// Select your input element.
var numInput = document.querySelector('input');
// Listen for input event on numInput.
numInput.addEventListener('input', function(){
// Let's match only digits.
var num = this.value.match(/^\d+$/);
if (num === null) {
// If we have no match, value will be empty.
this.value = "";
}
}, false)<input type="number" min="0" />Jeśli struganie na wysyłanie danych do serwera upewnij się, aby sprawdzić poprawność danych na serwerze, jak również. JavaScript po stronie klienta nie może zagwarantować, że wysyłane dane będą zgodne z oczekiwaniami.
Poniższy skrypt zezwala na wprowadzanie liczb lub backspace do danych wejściowych.
var number = document.getElementById('number');
number.onkeydown = function(e) {
if(!((e.keyCode > 95 && e.keyCode < 106)
|| (e.keyCode > 47 && e.keyCode < 58)
|| e.keyCode == 8)) {
return false;
}
}<input type="number" id="number" min="0">Jest to zbyt restrykcyjne, ponieważ nie pozwala użytkownikowi na wejście poza pole - niezwykle ważne dla szybkich aplikacji do wprowadzania danych lub technologii wspomagających (np. Dla osób, które nie mogą korzystać z karty myszy w terenie, a następnie utkną) – rmcsharry
Używa JavaScript, ale nie musisz pisać własnej procedury sprawdzania poprawności. Zamiast tego po prostu sprawdź właściwość validity.valid. Będzie to prawdą wtedy i tylko wtedy, gdy dane wejściowe mieszczą się w zakresie.
<html>
<body>
<form action="#">
<input type="number" name="test" min=0 oninput="validity.valid||(value='');"><br>
<input type="submit" value="Submit">
</form>
</body>
</html>Naprawdę niesamowite ! dopuszcza tylko liczby, które są pomiędzy Min. Maks., a nie zapisuje kodu javascript, jak sugerowali inni, lepiej jest go używać z tym oninput = "validity.valid || (value = '');" –
Jedynym problemem z tym rozwiązaniem jest całkowite usunięcie poprzednio wprowadzonej wartości po wprowadzeniu nieprawidłowej wartości. –
W jaki sposób możemy zapobiec wprowadzeniu naruszającego klucz i nie wyczyszczeniu całego pola? –
type="number" już rozwiązuje pozwalając numery tylko być wpisane jako pozostałe odpowiedzi tutaj podkreślić.
Tylko dla odniesienia: z jQuery można nadpisać wartości ujemne na focusOut z następującego kodu:
$(document).ready(function(){
$("body").delegate('#myInputNumber', 'focusout', function(){
if($(this).val() < 0){
$(this).val('0');
}
});
});
nie zastąpi walidacji po stronie serwera!
Jeśli chcesz zapewnić wartość domyślną, tj. Wartość minimalną lub dowolną inną wartość, jest to rozwiązanie robocze. Zapobiega to również wyczyszczeniu pola wejściowego. W ten sam sposób możesz ustawić jego maksymalną wartość.
<input type="number" min="1" max="9999" maxlength="4" oninput="this.value=this.value.slice(0,this.maxLength||1/1);this.value=(this.value < 1) ? (1/1) : this.value;">> "Zapobiega to również wyczyszczeniu pola wejściowego" Nie. Spowoduje to skasowanie wejścia i wypełnienie minimum. Nie kasuje - po wpisaniu 123- i wyświetleniu 123 w polu. – extempl
W HTML 5 u można zrobić tak: i myślę, że jest to najbardziej elegancki sposób, aby ograniczyć wprowadzanie przez użytkownika liczb dodatnich bez zapisywania funkcji sprawdzania poprawności. – Bikku
@GoodBadandUgly - Zostało to wspomniane w pytaniu wraz z jego ograniczeniami. – Quentin
Pamiętaj, że użytkownicy zawsze mogą ominąć takie ograniczenia! Jeśli przesyłasz coś do serwera (czytaj funkcje pobierania danych lub pobierania danych), musisz jeszcze raz potwierdzić. – Hafenkranich