มีวิธีใดบ้างที่จะป้องกันไม่ให้ type = "number" รับค่าลบ?

ฉันต้องการได้รับค่าบวกเท่านั้นมีวิธีการป้องกันโดยใช้ html เท่านั้น
โปรดอย่าแนะนำวิธีตรวจสอบ

ใช้minคุณลักษณะเช่นนี้:

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

ฉันไม่พอใจกับ@Abhrabm คำตอบเพราะ:

มันเป็นเพียงการป้องกันไม่ให้ตัวเลขติดลบจากลูกศรขึ้น / ลงในขณะที่ผู้ใช้สามารถพิมพ์หมายเลขติดลบจากคีย์บอร์ด

วิธีแก้ไขคือป้องกันด้วยรหัสคีย์ :

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

กำลังตรวจสอบรหัสคีย์ใด:

• 95, <106 สอดคล้องกับ Numpad 0 ถึง 9;
• 47, <58 สอดคล้องกับ 0 ถึง 9 บนแถวหมายเลข; และ 8 คือ Backspace

ดังนั้นสคริปต์นี้จึงป้องกันไม่ให้ป้อนรหัสที่ไม่ถูกต้องในอินพุต

สำหรับฉันทางออกคือ:

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

รหัสนี้ใช้งานได้ดีสำหรับฉัน คุณกรุณาตรวจสอบ:

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

วิธีง่าย ๆ :

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

ฉันต้องการอนุญาตตัวเลขทศนิยมและไม่ล้างอินพุตทั้งหมดหากมีการป้อนค่าลบ วิธีนี้ใช้ได้ดีใน Chrome อย่างน้อย:

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

คำตอบ @Manwal นั้นดี แต่ฉันชอบโค้ดที่มีโค้ดน้อยกว่าเพื่อให้อ่านง่ายขึ้น นอกจากนี้ฉันชอบใช้ onclick / onkeypress ใน html แทน

โซลูชันที่แนะนำของฉันทำเช่นเดียวกัน: เพิ่ม

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

ไปยังอินพุต html และ

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

เป็นฟังก์ชั่นจาวาสคริปต์

อย่างที่บอกไปแล้วมันก็ทำเช่นเดียวกัน เป็นเพียงการตั้งค่าส่วนตัวในการแก้ปัญหา

เพียงสำหรับการอ้างอิง: ด้วย jQuery คุณสามารถเขียนทับค่าลบบน focusout ด้วยรหัสต่อไปนี้:

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

สิ่งนี้ไม่ได้แทนที่การตรวจสอบความถูกต้องฝั่งเซิร์ฟเวอร์!

นี่คือวิธีแก้ปัญหาเชิงมุม 2:

สร้างคลาส 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();
    }
  }
}

เพิ่ม OnlyNumber ให้กับประกาศใน app.module.ts และใช้เช่นนี้ทุกที่ในแอปของคุณ

<input OnlyNumber="true">

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

เพียงเพิ่มวิธีอื่นในการทำเช่นนี้(โดยใช้ Angular)หากคุณไม่ต้องการลบ HTML ด้วยรหัสเพิ่มเติม:

คุณต้องสมัครสมาชิกกับ valueChanges ของเขตข้อมูลและตั้งค่าเป็นค่าสัมบูรณ์ (ดูแลไม่ให้ส่งเหตุการณ์ใหม่เนื่องจากจะทำให้เกิด valueChange อื่นดังนั้นการโทรซ้ำและเรียกใช้ข้อผิดพลาดเกินขนาดสูงสุด)

รหัส HTML

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

TypeScript CODE (ภายในคอมโพเนนต์ของคุณ)

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

คำตอบนี้ไม่เป็นประโยชน์ เพราะมันใช้งานได้เฉพาะเมื่อคุณใช้ปุ่มขึ้น / ลง แต่ถ้าคุณพิมพ์ -11 มันจะไม่ทำงาน ดังนั้นนี่คือการแก้ไขเล็ก ๆ ที่ฉันใช้

อันนี้สำหรับจำนวนเต็ม

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

อันนี้เมื่อคุณมีตัวเลขราคา

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

วิธีการแก้ปัญหานี้ช่วยให้การทำงานของแป้นพิมพ์ทั้งหมดรวมถึงการคัดลอกวางด้วยแป้นพิมพ์ มันป้องกันการวางตัวเลขติดลบด้วยเมาส์ มันทำงานได้กับเบราว์เซอร์ทั้งหมดและการสาธิตบนcodepenใช้ bootstrap และ jQuery สิ่งนี้ควรใช้กับการตั้งค่าและคีย์บอร์ดที่ไม่ใช่ภาษาอังกฤษ หากเบราว์เซอร์ไม่สนับสนุนการจับการวางเหตุการณ์ (IE) มันจะลบเครื่องหมายลบหลังจากโฟกัสออก วิธีการแก้ปัญหานี้ทำงานเป็นเบราว์เซอร์ดั้งเดิมควรมี min = 0 type = number

มาร์กอัป:

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

จาวาสคริ

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

นี่เป็นวิธีการแก้ปัญหาที่ทำงานได้ดีที่สุดของฉันสำหรับเขตข้อมูลจำนวนที่อนุญาตเฉพาะตัวเลข

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