Apakah ada cara untuk mencegah input type = "number" mendapatkan nilai negatif?

Saya hanya ingin mendapatkan nilai positif, apakah ada cara untuk mencegahnya dengan hanya menggunakan html.
Mohon jangan menyarankan metode validasi

Gunakan minatribut seperti ini:

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

Saya tidak puas dengan jawaban @Abhrabm karena:

Itu hanya mencegah angka negatif dimasukkan dari panah atas / bawah, sedangkan pengguna dapat mengetik angka negatif dari keyboard.

Solusi adalah mencegah dengan kode kunci :

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

Klarifikasi diberikan oleh @Hugh Guiney :

Kode kunci apa yang sedang diperiksa:

• 95, <106 sesuai dengan Numpad 0 hingga 9;
• 47, <58 sesuai dengan 0 hingga 9 pada Baris Nomor; dan 8 adalah Backspace.

Jadi skrip ini mencegah kunci yang tidak valid dimasukkan dalam input.

Bagi saya solusinya adalah:

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

Kode ini berfungsi dengan baik untuk saya. Bisakah Anda periksa:

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

Metode mudah:

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

Saya ingin mengizinkan angka desimal dan tidak menghapus seluruh input jika input negatif dimasukkan. Ini berfungsi dengan baik di chrome setidaknya:

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

Jawaban @Manwal baik, tetapi saya suka kode dengan lebih sedikit baris kode untuk keterbacaan yang lebih baik. Saya juga ingin menggunakan penggunaan onclick / onkeypress di html sebagai gantinya.

Solusi saya yang disarankan melakukan hal yang sama: Tambah

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

ke input html dan

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

sebagai fungsi javascript.

Seperti yang dikatakan, itu melakukan hal yang sama. Ini hanya preferensi pribadi tentang cara mengatasi masalah.

Hanya untuk referensi: dengan jQuery Anda dapat menimpa nilai negatif pada fokus dengan kode berikut:

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

Ini tidak menggantikan validasi sisi server!

Inilah solusi 2 sudut:

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

tambahkan OnlyNumber ke deklarasi di app.module.ts dan gunakan seperti ini di mana saja di aplikasi Anda

<input OnlyNumber="true">

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

Hanya menambahkan cara lain untuk melakukan ini (menggunakan Angular) jika Anda tidak ingin mengotori HTML dengan lebih banyak kode:

Anda hanya perlu berlangganan Perubahan nilai bidang dan menetapkan Nilai sebagai nilai absolut (menjaga agar tidak memancarkan event baru karena itu akan menyebabkan value changer yang lain karena itu panggilan rekursif dan memicu ukuran panggilan maksimum melebihi kesalahan)

KODE HTML

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

TypeScript CODE (Di Dalam Komponen Anda)

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'];
}

Jawabannya tidak membantu. karena ini hanya berfungsi ketika Anda menggunakan tombol atas / bawah, tetapi jika Anda mengetik -11 itu tidak akan berfungsi. Jadi di sini adalah perbaikan kecil yang saya gunakan

ini untuk bilangan bulat

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

ini ketika Anda memiliki jumlah harga

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

Solusi ini memungkinkan semua fungsionalitas keyboard termasuk salin tempel dengan keyboard. Ini mencegah menempelnya angka negatif dengan mouse. Ini bekerja dengan semua browser dan demo pada codepen menggunakan bootstrap dan jQuery. Ini harus bekerja dengan pengaturan dan keyboard non-bahasa Inggris. Jika browser tidak mendukung capture event paste (IE), itu akan menghapus tanda negatif setelah fokus keluar. Solusi ini berperilaku seperti seharusnya browser asli dengan min = 0 type = number.

Markup:

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

Ini adalah solusi yang paling cocok untuk saya dalam bidang QTY yang hanya memungkinkan angka.

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