Esiste un modo per impedire che input type = "number" ottenga valori negativi?

Voglio ottenere solo valori positivi, c'è un modo per impedirlo usando solo HTML?
Non suggerire il metodo di convalida

Usa l' minattributo in questo modo:

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

Non ero soddisfatto della risposta @Abhrabm perché:

Stava solo impedendo l' immissione di numeri negativi dalle frecce su / giù, mentre l'utente può digitare un numero negativo dalla tastiera.

La soluzione è prevenire con il codice chiave :

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

Chiarimento fornito da @Hugh Guiney :

Quali codici chiave vengono controllati:

• 95, <106 corrisponde a Numpad da 0 a 9;
• 47, <58 corrisponde da 0 a 9 nella riga dei numeri; e 8 è Backspace.

Quindi questo script impedisce l'immissione di una chiave non valida nell'input.

Per me la soluzione era:

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

Questo codice funziona bene per me. Potete per favore controllare:

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

Metodo semplice:

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

Volevo consentire i numeri decimali e non cancellare l'intero input se veniva immesso un negativo. Questo funziona bene in Chrome almeno:

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

La risposta di @Manwal è buona, ma mi piace il codice con meno righe di codice per una migliore leggibilità. Mi piace anche usare l'utilizzo di onclick / onkeypress in html.

La mia soluzione suggerita fa lo stesso: Aggiungi

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

all'input html e

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

come una funzione javascript.

Come detto, fa lo stesso. È solo una preferenza personale su come risolvere il problema.

Solo per riferimento: con jQuery è possibile sovrascrivere valori negativi su focusout con il seguente codice:

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

Questo non sostituisce la convalida lato server!

Ecco una soluzione angolare 2:

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

aggiungi OnlyNumber alle dichiarazioni in app.module.ts e usalo in questo modo ovunque nella tua app

<input OnlyNumber="true">

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

Basta aggiungere un altro modo per farlo (usando Angular) se non vuoi sporcare l'HTML con ancora più codice:

Devi solo iscriverti al campo valueChanges e impostare il valore come valore assoluto (facendo attenzione a non emettere un nuovo evento perché ciò causerà un altro valoreCambia quindi una chiamata ricorsiva e attiva un errore Dimensione massima chiamata superata)

CODICE HTML

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

CODICE TypeScript (all'interno del componente)

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

La risposta a questa non è utile. poiché funziona solo quando si usano i tasti su / giù, ma se si digita -11 non funzionerà. Quindi ecco una piccola correzione che uso

questo per numeri interi

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

questo quando hai numeri di prezzo

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

Questa soluzione consente tutte le funzionalità della tastiera incluso copia incolla con tastiera. Impedisce di incollare numeri negativi con il mouse. Funziona con tutti i browser e la demo su codepen utilizza bootstrap e jQuery. Questo dovrebbe funzionare con impostazioni e tastiere in lingua non inglese. Se il browser non supporta l'acquisizione degli eventi di incollaggio (IE), rimuoverà il segno negativo dopo l'attivazione. Questa soluzione si comporta come dovrebbe il browser nativo con min = 0 tipo = numero.

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

Ecco una soluzione che ha funzionato meglio di me per un campo QTY che consente solo numeri.

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