Có cách nào để ngăn chặn kiểu đầu vào = Số thứ hạng Nhận nhận giá trị âm không?

Tôi muốn chỉ nhận các giá trị dương, có cách nào để ngăn chặn nó chỉ bằng html
Vui lòng không đề xuất phương thức xác thực

Sử dụng minthuộc tính như thế này:

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

Tôi không hài lòng với câu trả lời của @Abhrabm vì:

Nó chỉ ngăn không cho số âm được nhập từ mũi tên lên / xuống, trong khi người dùng có thể nhập số âm từ bàn phím.

Giải pháp là ngăn chặn bằng mã khóa :

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

Làm rõ được cung cấp bởi @Hugh Guiney :

Những mã khóa nào đang được kiểm tra:

• 95, <106 tương ứng với Numpad 0 đến 9;
• 47, <58 tương ứng với 0 đến 9 trên Hàng số; và 8 là Backspace.

Vì vậy, tập lệnh này đang ngăn khóa không hợp lệ được nhập vào đầu vào.

Đối với tôi giải pháp là:

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

Mã này đang làm việc tốt cho tôi. Bạn có thể vui lòng kiểm tra:

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

Phương pháp dễ dàng:

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

Tôi muốn cho phép số thập phân và không xóa toàn bộ đầu vào nếu nhập âm. Điều này hoạt động tốt trong chrome ít nhất:

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

Câu trả lời @Manwal là tốt, nhưng tôi thích mã có ít dòng mã hơn để dễ đọc hơn. Ngoài ra tôi thích sử dụng onclick / onkeypress thay thế trong html.

Giải pháp đề xuất của tôi làm tương tự: Thêm

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

đến đầu vào html và

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

như một chức năng javascript.

Như đã nói, nó làm như vậy. Đó chỉ là sở thích cá nhân về cách giải quyết vấn đề.

Chỉ để tham khảo: với jQuery, bạn có thể ghi đè lên các giá trị âm trên tiêu điểm với mã sau:

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

Điều này không thay thế xác nhận phía máy chủ!

Đây là một giải pháp góc 2:

tạo một lớp 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();
    }
  }
}

thêm OnlyNumber vào khai báo trong app.module.ts và sử dụng như thế này ở bất cứ đâu trong ứng dụng của bạn

<input OnlyNumber="true">

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

Chỉ cần thêm một cách khác để làm điều này (sử dụng Angular) nếu bạn không muốn làm bẩn HTML với nhiều mã hơn:

Bạn chỉ phải đăng ký giá trị trường Thay đổi và đặt Giá trị là giá trị tuyệt đối (chú ý không phát ra sự kiện mới vì điều đó sẽ gây ra một giá trị khác Thay đổi cuộc gọi đệ quy và gây ra lỗi vượt quá kích thước cuộc gọi tối đa)

MÃ HTML

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

TypeScript CODE (Bên trong thành phần của bạn)

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

Câu trả lời cho điều này là không hữu ích. vì nó chỉ hoạt động khi bạn sử dụng phím lên / xuống, nhưng nếu bạn gõ -11 thì nó sẽ không hoạt động. Vì vậy, đây là một sửa chữa nhỏ mà tôi sử dụng

cái này cho số nguyên

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

cái này khi bạn có số giá

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

Giải pháp này cho phép tất cả các chức năng bàn phím bao gồm sao chép dán với bàn phím. Nó ngăn chặn dán số âm với chuột. Nó hoạt động với tất cả các trình duyệt và bản demo trên codepen sử dụng bootstrap và jQuery. Điều này sẽ làm việc với các cài đặt ngôn ngữ tiếng Anh và bàn phím. Nếu trình duyệt không hỗ trợ chụp sự kiện dán (IE), trình duyệt sẽ xóa dấu âm sau khi lấy nét. Giải pháp này hoạt động như trình duyệt riêng nên với min = 0 type = number.

Đánh dấu:

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

Đây là một giải pháp hoạt động tốt nhất với tôi cho trường QTY chỉ cho phép số.

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