Cách tạo kiểu = số hiệu Số chỉ thành số dương

hiện tại tôi có đoạn mã sau

<input type="number" />

nó đi ra một cái gì đó như thế này

Các công cụ chọn nhỏ bên phải cho phép số đi vào âm. Làm thế nào để tôi ngăn chặn điều đó?

Tôi đang nghi ngờ về việc sử dụng type="number", nó đang gây ra nhiều vấn đề hơn là giải quyết, tôi sẽ kiểm tra nó bằng mọi cách, vậy tôi có nên quay lại sử dụng type="text"không?

Thêm một minthuộc tính

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

Tôi đã tìm thấy một giải pháp khác để ngăn chặn số âm.

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

Nó phụ thuộc vào mức độ chính xác mà bạn muốn trở thành. Bạn muốn chỉ chấp nhận số nguyên, hơn:

<input type="number" min="1" step="1">

Nếu bạn muốn nổi với, ví dụ, hai chữ số sau dấu thập phân:

<input type="number" min="0.01" step="0.01">

Bạn có thể buộc đầu vào chỉ chứa số nguyên dương bằng cách thêm vào onkeypresstrong inputthẻ.

<input type="number" onkeypress="return event.charCode >= 48" min="1" >

Ở đây, event.charCode >= 48đảm bảo rằng chỉ các số lớn hơn hoặc bằng 0 được trả về, trong khi minthẻ đảm bảo rằng bạn có thể đạt tối thiểu 1 bằng cách cuộn trong thanh đầu vào.

Bạn chỉ có thể sử dụng các cách sau để type="number"chấp nhận các số dương:

input type="number" step="1" pattern="\d+"

Bạn có thể ngăn đầu vào phủ định ở dạng đầu vào số bằng cách sau:

<input type="number" onkeyup="if(this.value<0){this.value= this.value * -1}">

Thử

<input type="number" pattern="^[0-9]" title='Only Number' min="1" step="1">

Nếu cần nhập văn bản , mẫu cũng hoạt động

<input type="text" pattern="\d+">

Tôi không thể tìm thấy giải pháp hoàn hảo vì một số công việc để nhập nhưng không phải để sao chép và dán, một số là cách khác. Giải pháp này hiệu quả với tôi. Nó ngăn chặn số âm, gõ "e", sao chép và dán văn bản "e".

tạo một chức năng.

<script language="JavaScript">

  // this prevents from typing non-number text, including "e".
  function isNumber(evt) {
    evt = (evt) ? evt : window.event;
    let charCode = (evt.which) ? evt.which : evt.keyCode;
    if ((charCode > 31 && (charCode < 48 || charCode > 57)) && charCode !== 46) {
      evt.preventDefault();
    } else {
      return true;
    }
  }
</script>

thêm các thuộc tính này vào đầu vào. điều này ngăn không cho sao chép và dán văn bản không phải số, bao gồm cả "e". bạn cần phải có cả hai cùng nhau để có hiệu lực.

<input type="number" oninput="validity.valid||(value='');" onpress="isNumber(event)" />

Nếu bạn đang sử dụng Vue, bạn có thể tham khảo câu trả lời này tại đây . Tôi đã trích xuất nó thành một mixin có thể được tái sử dụng.

thêm mã này vào loại đầu vào của bạn;

onkeypress="return (event.charCode == 8 || event.charCode == 0 || event.charCode == 13) ? null : event.charCode >= 48 && event.charCode <= 57"

ví dụ:

<input type="text" name="age" onkeypress="return (event.charCode == 8 || event.charCode == 0 || event.charCode == 13) ? null : event.charCode >= 48 && event.charCode <= 57" />

Giải pháp khác là sử dụng Js để làm cho nó tích cực (tùy chọn tối thiểu có thể bị vô hiệu hóa và không hợp lệ khi người dùng gõ smth) Không thể sử dụng sự kiện tiêu cực nếu không cần thiết và bật ('keydown')!

let $numberInput =  $('#whatEverId');
$numberInput.on('change', function(){
    let numberInputText = $numberInput.val();
    if(numberInputText.includes('-')){
        $numberInput.val(Math.abs($numberInput.val()));
    }
});

Nó phụ thuộc vào việc bạn muốn một trường int hay float. Đây là những gì hai người sẽ trông như thế nào:

<input type="number" name="int-field" id="int-field" placeholder="positive int" min="1" step="1">
<input type="number" name="float-field" id="float-field" placeholder="positive float" min="0">

Trường int có xác nhận chính xác được đính kèm với nó, vì min của nó là 1. Tuy nhiên, trường float chấp nhận 0; để giải quyết vấn đề này, bạn có thể thêm một trình xác nhận ràng buộc nữa :

function checkIsPositive(e) {
  const value = parseFloat(e.target.value);
  if (e.target.value === "" || value > 0) {
    e.target.setCustomValidity("");
  } else {
    e.target.setCustomValidity("Please select a value that is greater than 0.");
  }
}

document.getElementById("float-field").addEventListener("input", checkIsPositive, false);

JSFiddle ở đây.

Lưu ý rằng không có giải pháp nào trong số này hoàn toàn ngăn người dùng cố gắng nhập dữ liệu nhập không hợp lệ, nhưng bạn có thể gọi checkValidityhoặcreportValidity tìm hiểu xem người dùng đã nhập dữ liệu hợp lệ chưa.

Tất nhiên, bạn vẫn nên xác thực phía máy chủ vì người dùng luôn có thể bỏ qua xác thực phía máy khách.

Thử cái này:

• Đã thử nghiệm ở góc 8
• giá trị là tích cực
• Mã này cũng xử lý nullvà negitivegiá trị.

              <input
                type="number"
                min="0"
                (input)="funcCall()" -- Optional
                oninput="value == '' ? value = 0 : value < 0 ? value = value * -1 : false"
                formControlName="RateQty"
                [(value)]="some.variable" -- Optional
              />

Nếu bạn cố gắng nhập một số âm, sự kiện onkeyup sẽ chặn điều này và nếu bạn sử dụng mũi tên trên số đầu vào, sự kiện onblur sẽ giải quyết phần đó.

<input type="number" 
    onkeyup="if(this.value<0)this.value=1"
    onblur="if(this.value<0)this.value=1"
>

Với kiểu nhập văn bản, bạn có thể sử dụng mục này để xác thực tốt hơn,

return (event.keyCode? (event.keyCode == 69 ? false : event.keyCode >= 48 && event.keyCode <= 57) : (event.charCode >= 48 && event.charCode <= 57))? true : event.preventDefault();

Thử cái này:

Yii2 : Validation rule 

    public function rules() {
    return [
['location_id', 'compare', 'compareValue' => 0', 'operator' => '>'],
        ];
}