Sadece pozitif sayılara type = “number” nasıl yapılır

şu anda aşağıdaki kod var

<input type="number" />

böyle bir şeye çıkıyor

Sağdaki küçük seçici şeyler sayının negatif olmasına izin verir. Bunu nasıl önleyebilirim?

Kullanmayla ilgili şüphelerim var type="number", çözdüğünden daha fazla soruna neden oluyor, yine de akıl sağlığımı kontrol edeceğim, bu yüzden sadece kullanmaya geri dönmeli miyim type="text"?

Ekle Bir minöznitelik

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

Negatif sayıyı önlemek için başka bir çözüm buldum.

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

Ne kadar hassas olmak istediğinize bağlıdır. Sadece tam sayıları kabul etmek istiyorsunuz:

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

Örneğin, ondalık noktadan sonra iki basamakla yüzer:

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

Sen ekleyerek sadece pozitif tam sayı içermelidir girdi zorlayabilir onkeypressiçinde inputetiketi.

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

Burada, event.charCode >= 48yalnızca 0 veya daha büyük sayıların döndürülmesini sağlarken, minetiket giriş çubuğunda kaydırarak en az 1 değerine ulaşmanızı sağlar.

Yalnızca type="number"pozitif sayıları kabul etmek için aşağıdakileri kullanabilirsiniz :

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

Bir sayı giriş formundaki negatif girişi aşağıdakileri yaparak önleyebilirsiniz:

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

Deneyin

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

Gerek ise metin girişi, desen da çalışır

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

Bazı girişler için mükemmel bir çözüm bulamıyorum ama kopyala ve yapıştır için değil, bazıları ise başka bir yol. Bu çözüm benim için çalışıyor. Negatif sayıdan "e" yazmayı, "e" metnini kopyalayıp yapıştırmayı önler.

işlev yarat.

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

bu özellikleri girişe ekleyin. bu ikisi "e" de dahil olmak üzere sayı olmayan metinleri kopyalayıp yapıştırmayı önler. etkili olmak için her ikisine de sahip olmanız gerekir.

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

Vue kullanıyorsanız , bu yanıta buradan başvurabilirsiniz . Tekrar kullanılabilen bir miksine çıkardım.

bu kodu giriş türünüze ekleyin;

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

Örneğin:

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

Diğer çözüm, Js'yi pozitif yapmak için kullanmaktır (min seçeneği devre dışı bırakılabilir ve kullanıcı ikiliği yazdığında geçerli değildir) Gerekmiyorsa negatif ve on ('keydown') olayı da kullanılabilir!

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

Bir int veya float alanı isteyip istemediğinize bağlıdır. İkisi şöyle görünecektir:

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

İnt alanı, min 1 olduğundan doğru doğrulamaya eklenmiştir. Ancak float alanı 0 değerini kabul eder; bununla başa çıkmak için bir kısıtlama doğrulayıcı daha ekleyebilirsiniz :

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

Bu çözümlerin hiçbirinin kullanıcının geçersiz girdi yazmaya çalışmasını tamamen engellemediğini, ancak kullanıcının geçerli girdiyi yazıp yazmadığını anlayabileceğinizi checkValidityveyareportValidity anlayabileceğinizi unutmayın.

Tabii ki, kullanıcı istemci tarafı doğrulamasını her zaman yok sayabileceğinden, yine de sunucu tarafı doğrulamanız gerekir.

Bunu dene:

• Açısal 8'de test edilmiştir
• değerler pozitif
• Bu kod ayrıca handels nullve negitivedeğerler.

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

Negatif bir sayı girmeye çalışırsanız, onkeyup olayı bunu engeller ve giriş numarasındaki oku kullanırsanız, onblur olayı bu bölümü çözer.

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

Metin türü girdi ile bunu daha iyi bir doğrulama için kullanabilirsiniz,

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

Bunu dene:

Yii2 : Validation rule 

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