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

obecnie mam następujący kod

<input type="number" />

wychodzi na coś takiego

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"?

Dodaj do minatrybutu

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

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

<input type="number" name="test_name" min="0" oninput="validity.valid||(value='');">

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">

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.

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

input type="number" step="1" pattern="\d+"

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}">

Próbować

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

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

<input type="text" pattern="\d+">

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ć.

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" />

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()));
    }
});

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.

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
              />

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"
>

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();

Spróbuj tego:

Yii2 : Validation rule 

    public function rules() {
    return [
['location_id', 'compare', 'compareValue' => 0', 'operator' => '>'],
        ];
}