Girdi türü = “sayı” nın negatif değerler almasını önlemenin bir yolu var mı?

Ben sadece olumlu değerler almak istiyorum, sadece html kullanarak önlemek için herhangi bir yolu var mı
Lütfen doğrulama yöntemi önermeyin

Bu minözelliği aşağıdaki gibi kullanın :

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

@Abhrabm yanıtından memnun kalmadım çünkü:

Yalnızca negatif sayıların yukarı / aşağı oklardan girilmesini engellerken , kullanıcı klavyeden negatif sayı yazabilir.

Çözüm, anahtar koduyla önlemektir :

// Select your input element.
var number = document.getElementById('number');

// Listen for input event on numInput.
number.onkeydown = function(e) {
    if(!((e.keyCode > 95 && e.keyCode < 106)
      || (e.keyCode > 47 && e.keyCode < 58) 
      || e.keyCode == 8)) {
        return false;
    }
}

<form action="" method="post">
  <input type="number" id="number" min="0" />
  <input type="submit" value="Click me!"/>
</form>

@Hugh Guiney tarafından sağlanan açıklama :

Hangi anahtar kodları kontrol ediliyor:

• 95, <106 Numpad 0 ila 9'a karşılık gelir;
• 47, <58 Sayı Satırında 0'dan 9'a karşılık gelir; ve 8 Backspace'dir.

Dolayısıyla bu komut dosyası girişte geçersiz anahtar girilmesini engelliyor.

Benim için çözüm şuydu:

<input type="number" min="0" oninput="this.value = Math.abs(this.value)">

Bu kod benim için iyi çalışıyor. Lütfen kontrol edebilir misin:

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

Kolay yöntem:

<input min='0' type="number" onkeypress="return (event.charCode == 8 || event.charCode == 0) ? null : event.charCode >= 48 && event.charCode <= 57">

Bir negatif girilirse ondalık sayılara izin vermek ve tüm girdiyi silmek istemedim. Bu en azından kromda iyi çalışır:

<input type="number" min="0" onkeypress="return event.charCode != 45">

@Manwal cevap iyidir, ama daha iyi okunabilirlik için daha az kod satırı ile kodu seviyorum. Ayrıca html yerine onclick / onkeypress kullanımını kullanmayı seviyorum.

Önerdiğim çözüm de aynısını yapıyor: Ekle

min="0" onkeypress="return isNumberKey(event)"

html girişine ve

function isNumberKey(evt){
    var charCode = (evt.which) ? evt.which : event.keyCode;
    return !(charCode > 31 && (charCode < 48 || charCode > 57));
}

bir javascript işlevi olarak.

Söylendiği gibi, aynı şeyi yapıyor. Sorunun nasıl çözüleceği sadece kişisel tercih.

Sadece referans için: jQuery ile, aşağıdaki kodla odak üzerinde negatif değerlerin üzerine yazabilirsiniz:

$(document).ready(function(){
    $("body").delegate('#myInputNumber', 'focusout', function(){
        if($(this).val() < 0){
            $(this).val('0');
        }
    });
});

Bu, sunucu tarafı doğrulamasının yerini almaz!

İşte açısal 2 çözümü:

bir sınıf oluşturun OnlyNumber

import {Directive, ElementRef, HostListener} from '@angular/core';

@Directive({
  selector: '[OnlyNumber]'
})
export class OnlyNumber {

  // Allow decimal numbers. The \. is only allowed once to occur
  private regex: RegExp = new RegExp(/^[0-9]+(\.[0-9]*){0,1}$/g);

  // Allow key codes for special events. Reflect :
  // Backspace, tab, end, home
  private specialKeys: Array<string> = ['Backspace', 'Tab', 'End', 'Home'];

  constructor(private el: ElementRef) {
  }

  @HostListener('keydown', ['$event'])
  onKeyDown(event: KeyboardEvent) {
    // Allow Backspace, tab, end, and home keys
    if (this.specialKeys.indexOf(event.key) !== -1) {
      return;
    }

    // Do not use event.keycode this is deprecated.
    // See: https://developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent/keyCode
    let current: string = this.el.nativeElement.value;
    // We need this because the current value on the DOM element
    // is not yet updated with the value from this event
    let next: string = current.concat(event.key);
    if (next && !String(next).match(this.regex)) {
      event.preventDefault();
    }
  }
}

app.module.ts içindeki bildirimlere OnlyNumber ekleyin ve uygulamanızın herhangi bir yerinde böyle kullanın

<input OnlyNumber="true">

oninput="this.value=(this.value   < Number(this.min) || this.value   > Number(this.max))  ? '' : this.value;"

Bunu yapmanın başka bir yolunu eklemek (Açısal kullanarak)HTML'yi daha fazla kodla kirlemek istemiyorsanız :

Yalnızca valueChanges alan alanına abone olmanız ve Değeri mutlak bir değer olarak ayarlamanız gerekir (başka bir değere neden olacağından yeni bir etkinlik yaymamaya dikkat ederek)

HTML KODU

<form [formGroup]="myForm">
    <input type="number" formControlName="myInput"/>
</form>

TypeScript CODE (Bileşeninizin İçinde)

formGroup: FormGroup;

ngOnInit() { 
    this.myInput.valueChanges 
    .subscribe(() => {
        this.myInput.setValue(Math.abs(this.myInput.value), {emitEvent: false});
    });
}

get myInput(): AbstractControl {
    return this.myForm.controls['myInput'];
}

Bunun cevabı faydalı değil. çünkü sadece yukarı / aşağı tuşlarını kullandığınızda çalışır, ancak -11 yazarsanız çalışmaz. İşte benim kullandığım küçük bir düzeltme

tamsayılar için bu

  $(".integer").live("keypress keyup", function (event) {
    //    console.log('int = '+$(this).val());
    $(this).val($(this).val().replace(/[^\d].+/, ""));
    if (event.which != 8 && (event.which < 48 || event.which > 57))
    {
        event.preventDefault();
    }
   });

fiyatlarınız olduğunda bunu yapın

        $(".numeric, .price").live("keypress keyup", function (event) {
     //    console.log('numeric = '+$(this).val());
    $(this).val($(this).val().replace(/[^0-9\,\.]/g, ''));

    if (event.which != 8 && (event.which != 44 || $(this).val().indexOf(',') != -1) && (event.which < 48 || event.which > 57)) {
        event.preventDefault();
    }
   });

Bu çözüm, klavyeyle kopyala yapıştır dahil tüm klavye işlevlerine izin verir. Negatif sayıların fare ile yapıştırılmasını önler. Kod tarayıcıdaki tüm tarayıcılar ve demo ile çalışır bootstrap ve jQuery kullanır. Bu, İngilizce dışındaki dil ayarları ve klavyelerle çalışmalıdır. Tarayıcı, yapıştır olayı yakalamayı (IE) desteklemiyorsa, odaklandıktan sonra negatif işareti kaldırır. Bu çözüm, yerel tarayıcının min = 0 tip = sayı ile olması gerektiği gibi davranır.

İşaretleme:

<form>
  <input class="form-control positive-numeric-only" id="id-blah1" min="0" name="nm1" type="number" value="0" />
  <input class="form-control positive-numeric-only" id="id-blah2" min="0" name="nm2" type="number" value="0" />
</form>

JavaScript

$(document).ready(function() {
  $("input.positive-numeric-only").on("keydown", function(e) {
    var char = e.originalEvent.key.replace(/[^0-9^.^,]/, "");
    if (char.length == 0 && !(e.originalEvent.ctrlKey || e.originalEvent.metaKey)) {
      e.preventDefault();
    }
  });

  $("input.positive-numeric-only").bind("paste", function(e) {
    var numbers = e.originalEvent.clipboardData
      .getData("text")
      .replace(/[^0-9^.^,]/g, "");
    e.preventDefault();
    var the_val = parseFloat(numbers);
    if (the_val > 0) {
      $(this).val(the_val.toFixed(2));
    }
  });

  $("input.positive-numeric-only").focusout(function(e) {
    if (!isNaN(this.value) && this.value.length != 0) {
      this.value = Math.abs(parseFloat(this.value)).toFixed(2);
    } else {
      this.value = 0;
    }
  });
});

İşte sadece sayılara izin veren bir QTY alanı için en iyi şekilde çalışan bir çözüm.

// Only allow numbers, backspace and left/right direction on QTY input
    if(!((e.keyCode > 95 && e.keyCode < 106) // numpad numbers
        || (e.keyCode > 47 && e.keyCode < 58) // numbers
        || [8, 9, 35, 36, 37, 39].indexOf(e.keyCode) >= 0 // backspace, tab, home, end, left arrow, right arrow
        || (e.keyCode == 65 && (e.ctrlKey === true || e.metaKey === true)) // Ctrl/Cmd + A
        || (e.keyCode == 67 && (e.ctrlKey === true || e.metaKey === true)) // Ctrl/Cmd + C
        || (e.keyCode == 88 && (e.ctrlKey === true || e.metaKey === true)) // Ctrl/Cmd + X
        || (e.keyCode == 86 && (e.ctrlKey === true || e.metaKey === true)) // Ctrl/Cmd + V
    )) {
        return false;
    }