it-swarm.it

C'è un modo per evitare che il tipo di input = "numero" ottenga valori negativi?

Voglio ottenere solo valori positivi, c'è un modo per impedirlo usando solo html
Si prega di non suggerire il metodo di convalida

Screenshot of input control

240
Tural Ali

Usa l'attributo min in questo modo:

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

Non ero soddisfatto @ Abhrabm answer perché:

Stava solo impedendo numeri negativi di essere inseriti da frecce su/giù, mentre l'utente può digitare il numero negativo dalla tastiera.

La soluzione è di prevenire con 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 a 0 a 9 nella Riga numerica; e 8 è Backspace.

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

101
Manwal

Per me la soluzione era:

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

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

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

Metodo semplice:

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

Volevo consentire i numeri decimali e non cancellare l'intero input se è stato inserito un negativo. Questo funziona bene in chrome almeno:

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

Solo per riferimento: con jQuery puoi 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 validazione lato server!

5
Hafenkranich

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

La mia soluzione suggerita fa lo stesso: Aggiungi

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

per l'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.

5
Chris H.

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 come questo ovunque nella tua app

<input OnlyNumber="true">
3
HeisenBerg

dovresti usare l'attributo min in input

<input type='number' min='0'/>
2
Ehsan
<input type="number" name="credit_days" pattern="[^\-]+" 
    #credit_days="ngModel" class="form-control" 
    placeholder="{{ 'Enter credit days' | translate }}" min="0" 
    [(ngModel)]="provider.credit_days"
    onkeypress="return (event.charCode == 8 || event.charCode == 0 || 
    event.charCode == 13) ? null : event.charCode >= 48 && event.charCode <= 
    57" onpaste="return false">
1
Hui Lin

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;
    }
0
TheRealJAG
oninput="this.value=(this.value   < Number(this.min) || this.value   > Number(this.max))  ? '' : this.value;"
0
user9276950

Questa soluzione consente tutte le funzionalità della tastiera incluso il copia incolla con tastiera. Previene l'incollatura di numeri negativi con il mouse. Funziona con tutti i browser e la demo su codepen usa bootstrap e jQuery. Questo dovrebbe funzionare con impostazioni e tastiere non in lingua inglese. Se il browser non supporta l'evento Incolla Incolla (IE), rimuoverà il segno negativo dopo la messa a fuoco. Questa soluzione si comporta come il browser nativo dovrebbe 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;
    }
  });
});
0
wilsotc