有什麼辦法可以防止輸入類型=「數字」變成負值嗎？

Question

我想只有正面的價值觀，有沒有什麼辦法來防止它僅使用HTML
請不要建議驗證方法

Answer 1

使用min attribute這樣的：

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

Answer 2

我對@Abhrabm answer不滿意，因爲：

它只能防止負號號碼從 上下箭頭輸入，而用戶可以從鍵盤輸入負號。

解決方案是爲了防止與鍵碼：由@Hugh Guiney提供

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

澄清：

什麼是被檢查的鍵碼：

• 95,< 106對應於數字小鍵盤0至9;
• 47,< 58對應於Number Row上的0到9;和8是 Backspace。

所以這個腳本可以防止輸入無效的密鑰。

Answer 3

僅供參考：與jQuery可以覆蓋在事件的內容負值用下面的代碼：

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

這並不能取代服務器端驗證！

Answer 4

@Manwal答案很好，但我喜歡使用較少的代碼行來獲得更好的可讀性。另外我喜歡在html中使用onclick/onkeypress用法。

我建議的解決方案確實是相同的： 添加

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

的JavaScript函數。

如上所述，它也是如此。這只是關於如何解決問題的個人偏好。

Answer 5

此代碼適合我。能否請您檢查：

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

Answer 6

這裏有一個角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"> 

Answer 7

對我來說，解決辦法是：

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

Answer 8

簡單的方法：

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

Answer 9

該解決方案使包括副本鍵盤粘貼所有的鍵盤功能。它可以防止用鼠標粘貼負數。它適用於所有瀏覽器，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> 

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

Answer 10

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

Answer 11

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