Jak zrobić type = „number” tylko na liczbach dodatnich

284

obecnie mam następujący kod

<input type="number" />

wychodzi na coś takiego

wprowadź opis zdjęcia tutaj

Małe elementy selektora po prawej stronie pozwalają, aby liczba stała się ujemna. Jak temu zapobiec?

Mam wątpliwości co do używania type="number", powoduje więcej problemów niż rozwiązywania, i tak sprawdzę zdrowie psychiczne, więc czy powinienem po prostu wrócić do używania type="text"?

Arian Faurtosh
źródło
4
Nadal będziesz musiał zweryfikować wartość na serwerze. Każdy może zastąpić pole, aby wysłać dowolną treść.
zzzzBov,
2
@zzzzBov Tak, sprawdzam poprawność za pomocą php, a także używam instrukcji przygotowania, jedyne, o co się martwić, to użytkownicy, którzy jęczmień wiedzą, jak korzystać z przeglądarki internetowej. lol
Arian Faurtosh

Odpowiedzi:

635

Dodaj do minatrybutu

<input type="number" min="0">

Quentin
źródło
36
Działa to w przypadku strzałek wyboru, ale umożliwia wpisanie liczby ujemnej
David Burton
2
Zmiana atrybutu na min="0.000001"pomoże w większości przypadków. Ponad 6 miejsc po przecinku, JavaScript skonwertuje go na format wykładniczy.
MarkMYoung
Domyślnie dopuszcza to tylko liczby całkowite, ale nie dziesiętne. Zobacz Zezwalanie na wartości dziesiętne .
str.
118

Znalazłem inne rozwiązanie, aby zapobiec liczbie ujemnej.

<input type="number" name="test_name" min="0" oninput="validity.valid||(value='');">
Kushal
źródło
Nie można przy tym dodawać liczb zmiennoprzecinkowych. Również numeryczny stepper tutaj nie działa.
hamzox
1
oninput="validity.valid||(value='');"powstrzymuje jedną od wpisywania liczb
Hello Universe
5
To powinno być oznaczone jako poprawna odpowiedź, ponieważ zapobiega także wpisywaniu znaku „-”
JanBrus
Działa to świetnie, jeśli potrzebujesz, tak jak ja, dodatnich liczb całkowitych. Dzięki!
Boris,
74

To zależy od tego, jak precyzyjnie chcesz być. Jeśli chcesz zaakceptować tylko liczby całkowite, niż:

<input type="number" min="1" step="1">

Jeśli chcesz liczb zmiennoprzecinkowych, na przykład, dwie cyfry po przecinku:

<input type="number" min="0.01" step="0.01">

Pavlo
źródło
Wygląda na to, że obecnie działa bez kroku = „1” ... czy nadal powinienem to dodać?
Arian Faurtosh
@Arian, możesz to pominąć, dopóki nie określisz maxwartości.
Pavlo
1
Krok 1 jest domyślnym ustawieniem przeglądarki, wszystko w porządku
Stephan Muller,
4
Nie zapobiega to wciąż wpisywaniu złych wartości - jeśli pominiesz wartość kroku, chrome zmniejsza sprawdzanie poprawności podczas pisania, dzięki czemu możesz wprowadzić wartości nienumeryczne. Z ustawionym krokiem pozwala tylko wpisywać wartości spoza zakresu minimum-maksimum - nadal źle, ale lepiej.
David Burton,
min = „1” krok = „1” nadal pozwala mi wpisywać liczby zmiennoprzecinkowe, takie jak 1.2 Jak wymusić tylko liczbę całkowitą?
Sam
50

Możesz wymusić, aby dane wejściowe zawierały tylko dodatnią liczbę całkowitą, dodając onkeypressdo inputznacznika.

<input type="number" onkeypress="return event.charCode >= 48" min="1" >

Tutaj event.charCode >= 48zapewnia, że ​​zwracane są tylko liczby większe lub równe 0, a minznacznik zapewnia, że ​​możesz dojść do co najmniej 1, przewijając pasek wprowadzania.

Shubham Mittal
źródło
3
W Edge możesz w tym wpisać „A”.
Amy Blankenship
10
Nadal możesz wkleić liczbę ujemną
metyl
5

Możesz użyć następujących opcji, aby type="number"zaakceptować tylko liczby dodatnie:

input type="number" step="1" pattern="\d+"
Deepali
źródło
2
Czy możesz spróbować wyjaśnić, co robi twoje oświadczenie i dlaczego to pomaga? Ponadto masz dwa różne fragmenty. Który jest prawidłowy?
Aenadon
2
dodając atrybut step, ograniczasz wprowadzanie do liczby całkowitej, a dodanie wzorca gwarantuje, że użycie części ułamkowej spowoduje, że pole zostanie oznaczone jako nieprawidłowe, ale zależy od implementacji przeglądarki (Firefox zaznacza to pole jako czerwone po utracie skupienia danych wejściowych, podczas gdy Chrome nie pozwala w pierwszej kolejności wpisujesz niedozwolone wartości). Należy to sprawdzić na serwerze / kliencie.
Deepali
5

Można zapobiec wprowadzaniu wartości ujemnych w postaci liczbowej, wykonując następujące czynności:

<input type="number" onkeyup="if(this.value<0){this.value= this.value * -1}">

Hafijur Rahman Sakib
źródło
3

Próbować

<input type="number" pattern="^[0-9]" title='Only Number' min="1" step="1">

Rogerio de Moraes
źródło
Podczas definiowania typu potrzebny jest określony format roli.
Rogerio de Moraes,
7
Wypróbowałem to w chromie, ale to nie wymusza wzoru
David Burton
Czy istnieje sposób, że jeśli dodam type = „text” zamiast „number”?
Kapil Verma
1

W przypadku potrzeby wprowadzania tekstu wzór działa również

<input type="text" pattern="\d+">
ABDO
źródło
1

Nie mogę znaleźć idealnego rozwiązania, ponieważ niektóre prace dotyczą wprowadzania, ale nie kopiowania i wklejania, niektóre są na odwrót. To rozwiązanie działa dla mnie. Zapobiega wpisywaniu liczby ujemnej, wpisywaniu „e”, kopiowaniu i wklejaniu tekstu „e”.

stworzyć funkcję.

<script language="JavaScript">

  // this prevents from typing non-number text, including "e".
  function isNumber(evt) {
    evt = (evt) ? evt : window.event;
    let charCode = (evt.which) ? evt.which : evt.keyCode;
    if ((charCode > 31 && (charCode < 48 || charCode > 57)) && charCode !== 46) {
      evt.preventDefault();
    } else {
      return true;
    }
  }
</script>

dodaj te właściwości do danych wejściowych. te dwa zapobiegają kopiowaniu i wklejaniu tekstu nieliczbowego, w tym „e”. musisz mieć oba razem, aby zadziałały.

<input type="number" oninput="validity.valid||(value='');" onpress="isNumber(event)" />

Jeśli korzystasz z Vue , możesz odnieść się do tej odpowiedzi tutaj . Wyodrębniłem go do mixinu, który można ponownie wykorzystać.

Arst
źródło
0

dodaj ten kod do swojego typu wejściowego;

onkeypress="return (event.charCode == 8 || event.charCode == 0 || event.charCode == 13) ? null : event.charCode >= 48 && event.charCode <= 57"

na przykład:

<input type="text" name="age" onkeypress="return (event.charCode == 8 || event.charCode == 0 || event.charCode == 13) ? null : event.charCode >= 48 && event.charCode <= 57" />
Sakawa Bob
źródło
1
jest to bardzo mylące dla każdego, kto nie rozumie, co się dzieje.
RozzA,
W ten sposób możesz nadal wklejać cokolwiek na wejściu, alfabecie, a nawet na znakach specjalnych
Lê Gia L
0

Innym rozwiązaniem jest użycie Js, aby było dodatnie (opcja min może być wyłączona i nie jest poprawna, gdy użytkownik wpisze coś). Można również użyć ujemnego, jeśli nie jest konieczne i zdarzenia („keydown”)!

let $numberInput =  $('#whatEverId');
$numberInput.on('change', function(){
    let numberInputText = $numberInput.val();
    if(numberInputText.includes('-')){
        $numberInput.val(Math.abs($numberInput.val()));
    }
});
Andres Paul
źródło
0

Zależy to od tego, czy chcesz pole int czy float. Oto jak będą wyglądać dwa:

<input type="number" name="int-field" id="int-field" placeholder="positive int" min="1" step="1">
<input type="number" name="float-field" id="float-field" placeholder="positive float" min="0">

Do pola int dołączona jest poprawna walidacja, ponieważ jego min wynosi 1. Pole zmiennoprzecinkowe przyjmuje jednak 0; aby sobie z tym poradzić, możesz dodać jeszcze jeden walidator ograniczeń :

function checkIsPositive(e) {
  const value = parseFloat(e.target.value);
  if (e.target.value === "" || value > 0) {
    e.target.setCustomValidity("");
  } else {
    e.target.setCustomValidity("Please select a value that is greater than 0.");
  }
}

document.getElementById("float-field").addEventListener("input", checkIsPositive, false);

JSFiddle tutaj.

Zauważ, że żadne z tych rozwiązań całkowicie nie uniemożliwia użytkownikowi próby wpisania nieprawidłowego wejścia, ale możesz zadzwonić checkValiditylubreportValidity dowiedzieć się, czy użytkownik wpisał prawidłowe dane wejściowe.

Oczywiście nadal powinieneś mieć sprawdzanie poprawności po stronie serwera, ponieważ użytkownik zawsze może zignorować sprawdzanie poprawności po stronie klienta.

Kevinji
źródło
0

Spróbuj tego:

  • Testowany w Angular 8
  • wartości są dodatnie
  • Ten kod również obsługuje nulli negitivewartości.
              <input
                type="number"
                min="0"
                (input)="funcCall()" -- Optional
                oninput="value == '' ? value = 0 : value < 0 ? value = value * -1 : false"
                formControlName="RateQty"
                [(value)]="some.variable" -- Optional
              />
geeth-marathi
źródło
0

Jeśli spróbujesz wprowadzić liczbę ujemną, zdarzenie onkeyup blokuje to, a jeśli użyjesz strzałki na numerze wejściowym, zdarzenie onblur rozwiązuje tę część.

<input type="number" 
    onkeyup="if(this.value<0)this.value=1"
    onblur="if(this.value<0)this.value=1"
>

Wictor Chaves
źródło
-2

Dzięki typowi tekstu możesz użyć tego do lepszej weryfikacji,

return (event.keyCode? (event.keyCode == 69 ? false : event.keyCode >= 48 && event.keyCode <= 57) : (event.charCode >= 48 && event.charCode <= 57))? true : event.preventDefault();
Anurag
źródło
-4

Spróbuj tego:

Yii2 : Validation rule 

    public function rules() {
    return [
['location_id', 'compare', 'compareValue' => 0', 'operator' => '>'],
        ];
}
użytkownik10132380
źródło