Cara membuat ketik = "angka" hanya untuk angka positif

Saat ini saya memiliki kode berikut

<input type="number" />

itu keluar untuk sesuatu seperti ini

Hal-hal pemilih kecil di sebelah kanan memungkinkan angka untuk menjadi negatif. Bagaimana saya mencegahnya?

Saya ragu menggunakan type="number", ini menyebabkan lebih banyak masalah daripada menyelesaikannya, saya akan memeriksa kewarasannya, jadi haruskah saya kembali menggunakan type="text"?

Menambahkan sebuah minatribut

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

Saya telah menemukan solusi lain untuk mencegah angka negatif.

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

Tergantung pada seberapa tepat Anda ingin menjadi. Anda hanya ingin menerima bilangan bulat, daripada:

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

Jika Anda ingin mengapung dengan, misalnya, dua digit setelah titik desimal:

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

Anda dapat memaksa input hanya berisi bilangan bulat positif dengan menambahkan onkeypressdi dalam inputtag.

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

Di sini, event.charCode >= 48pastikan hanya angka yang lebih besar dari atau sama dengan 0 yang dikembalikan, sementara mintag memastikan bahwa Anda dapat mencapai minimum 1 dengan menggulir di dalam bilah masukan.

Anda dapat menggunakan yang berikut untuk type="number"menerima hanya angka positif:

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

Anda dapat mencegah input negatif dalam formulir input angka dengan yang berikut ini:

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

Mencoba

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

Jika membutuhkan input teks , polanya juga berfungsi

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

Saya tidak dapat menemukan solusi sempurna karena beberapa pekerjaan untuk memasukkan tetapi tidak untuk salin & tempel, beberapa sebaliknya. Solusi ini bekerja untuk saya. Ini mencegah dari angka negatif, mengetik "e", salin & tempel teks "e".

buat fungsi.

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

tambahkan properti ini ke input. ini mencegah dua dari copy & paste teks non-angka, termasuk "e". Anda harus bersama-sama untuk membuat efek.

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

Jika Anda menggunakan Vue, Anda dapat merujuk jawaban ini di sini . Saya telah mengekstraknya ke dalam mixin yang dapat digunakan kembali.

tambahkan kode ini di tipe input Anda;

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

sebagai contoh:

<input type="text" name="age" onkeypress="return (event.charCode == 8 || event.charCode == 0 || event.charCode == 13) ? null : event.charCode >= 48 && event.charCode <= 57" />

Solusi lain adalah dengan menggunakan Js untuk membuatnya positif (opsi min dapat dinonaktifkan dan tidak valid ketika pengguna mengetikkan sesuatu). Negatif jika tidak diperlukan dan acara ('keydown') juga dapat digunakan!

let $numberInput =  $('#whatEverId');
$numberInput.on('change', function(){
    let numberInputText = $numberInput.val();
    if(numberInputText.includes('-')){
        $numberInput.val(Math.abs($numberInput.val()));
    }
});

Itu tergantung pada apakah Anda menginginkan bidang int atau float. Seperti apa keduanya nanti:

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

Field int memiliki validasi yang benar, karena minnya adalah 1. Field float menerima 0, namun; untuk mengatasinya, Anda dapat menambahkan satu validator kendala lagi :

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 di sini.

Perhatikan bahwa tidak satu pun dari solusi ini yang sepenuhnya mencegah pengguna mencoba mengetik input yang tidak valid, tetapi Anda dapat memanggil checkValidityataureportValidity mengetahui apakah pengguna telah mengetikkan input yang valid.

Tentu saja, Anda harus tetap memiliki validasi sisi-server karena pengguna selalu dapat mengabaikan validasi sisi-klien.

Coba ini:

• Diuji dalam Angular 8
• nilai-nilai itu positif
• Kode ini juga menangani nulldan negitivenilai.

              <input
                type="number"
                min="0"
                (input)="funcCall()" -- Optional
                oninput="value == '' ? value = 0 : value < 0 ? value = value * -1 : false"
                formControlName="RateQty"
                [(value)]="some.variable" -- Optional
              />

Jika Anda mencoba memasukkan angka negatif, event onkeyup memblokir ini dan jika Anda menggunakan panah pada nomor input, event onblur menyelesaikan bagian itu.

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

Dengan jenis input teks Anda dapat menggunakan ini untuk validasi yang lebih baik,

return (event.keyCode? (event.keyCode == 69 ? false : event.keyCode >= 48 && event.keyCode <= 57) : (event.charCode >= 48 && event.charCode <= 57))? true : event.preventDefault();

Coba ini:

Yii2 : Validation rule 

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