防止用户在数字类型的输入元素中输入负数
Preventing user from entering negative numbers in input elements with number type
我从另一个问题中得到了以下代码,关于如何防止用户输入负数,但它涵盖了所有输入。我有2个number
型输入元素和2个text
型输入元素。我显然希望允许用户向文本字段添加任何字符,但希望防止用户输入负数/非数字内容到number
输入。
下面的代码适用于number
类型的一个输入,而不是另一个输入。我该如何修改我的代码以允许其他number
输入?如有任何帮助,我将不胜感激。
HTML
<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>
Javascript 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);
JS Here!
编辑
对于一些重复的问题,它们只涵盖一个输入或所有输入。我只是想避免两个输入都是负数。如果我想添加更多具有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);
})
通常在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
}
});
});
这不能取代服务器端验证!
您的querySelectorAll
方法返回类型为number的所有输入元素的数组。您目前选中了数组中的第一个元素,因此它是唯一检查输入的输入框。
导致只限制一个输入的代码是本行末尾的[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>
你可以直接使用js输入-我认为这是你的问题的简单和干净的解决方案:
把这个放在每个输入上:onkeypress='return event.charCode >= 48 && event.charCode <= 57'
- Javascript获取具有不同id的文件数's来自没有多个属性的文件输入元素
- 访问代码生成的输入元素上的keyup事件
- 使用 jQuery,当我在输入框外部单击时,如何更改输入元素的值
- 使用jQuery切换来显示内容,但防止在用户单击输入元素时关闭
- 如何使用角度事件处理程序引用输入元素的值
- 获取javascript中输入元素的索引
- 为什么Bootstrap typeahead不适用于具有相同ID的输入元素
- 如何使用javascript在输入元素中显示特殊字符
- 动态添加的输入元素不会在脚本中返回值
- 使用 jQuery 禁用除表单中的某些输入元素之外的所有输入元素
- 将焦点设置为输入元素角度 js
- 如何仅在输入元素具有焦点时才启动 setInterval
- 即使使用 parseInt,我也无法从输入元素中获取数值
- 通过应用自定义 css 类禁用 html 输入元素
- 聚合物 - 访问自定义元素内的 DOM 输入元素
- HTML-输入元素中不可删除的占位符
- 使用jquery将属性附加到输入元素
- 如果所有其他元素都填写在AngularJS中,如何动态添加新的输入元素
- 什么是输入元素上的innerHTML
- 输入元素模式属性的Javascript正则表达式在reFiddle上有效,但在页面上无效