[英]How to restrict user from entering number in to an input field with type as text?
[英]Preventing user from entering negative numbers in input elements with number type
我在這里有關於如何防止用戶輸入負數的另一個問題的以下代碼,但它涵蓋了所有輸入。 我有2個number
類型輸入元素和2個text
類型輸入元素。 我顯然希望允許用戶在文本字段中添加任何字符,但希望阻止用戶輸入負數/非數字內容到number
輸入。
我的下面的代碼適用於一個輸入number
類型而不是另一個輸入。 如何更改我的代碼以允許其他number
輸入? 任何幫助將不勝感激。
<div class="cpNewTemplateDetailsWrap">
<div class="col-sm-3">
<label>Course Id</label>
</div>
<div class="col-sm-9">
<input id="courseIdInput" type="text" class="form-control input-lg" placeholder="e.g. CT001" />
</div>
<div class="col-sm-3">
<label>Course Description</label>
</div>
<div class="col-sm-9">
<input id="courseDescInput" type="text" class="form-control input-lg" placeholder="e.g. Cadet Training" />
</div>
<div class="col-sm-3">
<label>Course Duration <small>(Days)</small>
</label>
</div>
<div class="col-sm-9">
<input id="courseDurationInput" type="number" min="0" class="form-control input-lg" placeholder="5" />
</div>
<div class="col-sm-3" id="courseDemandTitle">
<label>Course Demand</label>
</div>
<div class="col-sm-9">
<input id="courseDemandInput" type="number" min="0" class="form-control input-lg" placeholder="5" />
</div>
</div>
var myInput = document.querySelectorAll("input[type=number]")[0];
myInput.addEventListener('keypress', function(e) {
var key = !isNaN(e.charCode) ? e.charCode : e.keyCode;
function keyAllowed() {
var keys = [8,9,13,16,17,18,19,20,27,46,48,49,50,
51,52,53,54,55,56,57,91,92,93];
if (key && keys.indexOf(key) === -1)
return false;
else
return true;
}
if (!keyAllowed())
e.preventDefault();
}, false);
// Disable pasting of non-numbers
myInput.addEventListener('paste', function(e) {
var pasteData = e.clipboardData.getData('text/plain');
if (pasteData.match(/[^0-9]/))
e.preventDefault();
}, false);
對於一些重復的問題,它們只涵蓋一個輸入或所有輸入。 我只是想防止2個輸入的負數。 如果我想添加更多帶number
類型的輸入元素,我不想為每次迭代重復代碼。 例如,如果我有12個輸入,我不想再使用該代碼12次。
您只是將事件偵聽器添加到第一個數字輸入。
https://jsfiddle.net/tpsbnp9q/5/
var myInput = document.querySelectorAll("input[type=number]");
function keyAllowed(key) {
var keys = [8, 9, 13, 16, 17, 18, 19, 20, 27, 46, 48, 49, 50,
51, 52, 53, 54, 55, 56, 57, 91, 92, 93
];
if (key && keys.indexOf(key) === -1)
return false;
else
return true;
}
myInput.forEach(function(element) {
element.addEventListener('keypress', function(e) {
var key = !isNaN(e.charCode) ? e.charCode : e.keyCode;
if (!keyAllowed(key))
e.preventDefault();
}, false);
// Disable pasting of non-numbers
element.addEventListener('paste', function(e) {
var pasteData = e.clipboardData.getData('text/plain');
if (pasteData.match(/[^0-9]/))
e.preventDefault();
}, false);
})
您的querySelectorAll
方法返回數字類型的所有輸入元素的數組。 您當前在所選數組中有第一個元素,因此這是檢查輸入的唯一輸入框。
僅導致一個輸入受限的代碼是此行末尾的[0]
var myInput = document.querySelectorAll("input[type=number]")[0];
現在你可以有一個第二個變量,比如myOtherInput,並為它添加一個事件監聽器:
var myOtherInput = document.querySelectorAll("input[type=number]")[1];
myOtherInput.addEventListener('keypress', function(e) {
var key = !isNaN(e.charCode) ? e.charCode : e.keyCode;
function keyAllowed() {
var keys = [8,9,13,16,17,18,19,20,27,46,48,49,50,
51,52,53,54,55,56,57,91,92,93];
if (key && keys.indexOf(key) === -1)
return false;
else
return true;
}
if (!keyAllowed())
e.preventDefault();
}, false);
但它會添加重復的代碼,如果您想限制輸入的負載,可能無法幫助您。
您可以為所有選擇性輸入元素指定類名,並使用循環在每個輸入[type ='number']上附加事件。
這不包括粘貼負數的情況。
// get all number fields var numInputs = document.querySelectorAll('input[type="number"]'); // Loop through the collection and call addListener on each element Array.prototype.forEach.call(numInputs, addListener); function addListener(elm,index){ elm.setAttribute('min', 0); // set the min attribute on each field elm.addEventListener('keypress', function(e){ // add listener to each field var key = !isNaN(e.charCode) ? e.charCode : e.keyCode; str = String.fromCharCode(key); if (str.localeCompare('-') === 0){ event.preventDefault(); } }); }
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width"> <title>JS Bin</title> </head> <body> <lable>Number: <input type="number"></label> <br> <lable>Number: <input type="number"></label> <br> <lable>Text: <input type="text"></label> <br> <lable>Text: <input type="text"></label> </body> </html>
通常只在type="number"
字段上使用min="0"
屬性就足夠了。
<input type="number" min="0" step="0.1" name="whatever" />
如果您需要堅持<input type="text" />
或支持非常舊的瀏覽器或想要確保用戶不通過鍵盤輸入負數(在某些瀏覽器上可能使用min="0"
),使用jQuery可以覆蓋具有特定類屬性的所有輸入的focusOut上的負值,具有以下代碼:
$(document).ready(function(){
$("body").on('focusout', '.my-input-number-positive', function(){
if($(this).val() < 0){
$(this).val('0'); // alternatively show a hint – or whatever
}
});
});
這不會取代服務器端驗證!
您可以直接在輸入上使用js - 我認為這是解決您問題的簡單而干凈的解決方案:
只需將它放在每個輸入上: onkeypress='return event.charCode >= 48 && event.charCode <= 57'
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.