有一个快速的方法来设置HTML文本输入(<input type=text />),只允许数字击键(加上'.')?
当前回答
这是一个改进的函数:
function validateNumber(evt) {
var theEvent = evt || window.event;
var key = theEvent.keyCode || theEvent.which;
if ((key < 48 || key > 57) && !(key == 8 || key == 9 || key == 13 || key == 37 || key == 39 || key == 46) ){
theEvent.returnValue = false;
if (theEvent.preventDefault) theEvent.preventDefault();
}
}
其他回答
你可以附加到key down事件,然后根据你需要过滤键,例如:
<input id="FIELD_ID" name="FIELD_ID" onkeypress="return validateNUM(event,this);" type="text">
实际的JavaScript处理程序是:
function validateNUM(e,field)
{
var key = getKeyEvent(e)
if (specialKey(key)) return true;
if ((key >= 48 && key <= 57) || (key == 46)){
if (key != 46)
return true;
else{
if (field.value.search(/\./) == -1 && field.value.length > 0)
return true;
else
return false;
}
}
function getKeyEvent(e){
var keynum
var keychar
var numcheck
if(window.event) // IE
keynum = e.keyCode
else if(e.which) // Netscape/Firefox/Opera
keynum = e.which
return keynum;
}
您可以尝试使用" 'onkeydown " '事件并取消事件(事件。preventDefault或类似的)当它不是允许的键之一。
下面的代码还将检查PASTE事件。 取消“ruleSetArr_4”的注释,并在“ruleSetArr”中添加(concate)以允许浮点数。 简单的复制/粘贴功能。用参数中的input元素调用它。 例如:inputIntTypeOnly($('输入[name = " inputName "] '))
function inputIntTypeOnly(elm){ elm.on("keydown",function(event){ var e = event || window.event, key = e.keyCode || e.which, ruleSetArr_1 = [8,9,46], // backspace,tab,delete ruleSetArr_2 = [48,49,50,51,52,53,54,55,56,57], // top keyboard num keys ruleSetArr_3 = [96,97,98,99,100,101,102,103,104,105], // side keyboard num keys ruleSetArr_4 = [17,67,86], // Ctrl & V //ruleSetArr_5 = [110,189,190], add this to ruleSetArr to allow float values ruleSetArr = ruleSetArr_1.concat(ruleSetArr_2,ruleSetArr_3,ruleSetArr_4); // merge arrays of keys if(ruleSetArr.indexOf() !== "undefined"){ // check if browser supports indexOf() : IE8 and earlier var retRes = ruleSetArr.indexOf(key); } else { var retRes = $.inArray(key,ruleSetArr); }; if(retRes == -1){ // if returned key not found in array, return false return false; } else if(key == 67 || key == 86){ // account for paste events event.stopPropagation(); }; }).on('paste',function(event){ var $thisObj = $(this), origVal = $thisObj.val(), // orig value newVal = event.originalEvent.clipboardData.getData('Text'); // paste clipboard value if(newVal.replace(/\D+/g, '') == ""){ // if paste value is not a number, insert orig value and ret false $thisObj.val(origVal); return false; } else { $thisObj.val(newVal.replace(/\D+/g, '')); return false; }; }); }; var inptElm = $('input[name="inputName"]'); inputIntTypeOnly(inptElm); <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <input type="text" name="inputName" value="1">
我使用jquery.inputmask.js库,你可以从NuGet下载。 更具体地说,我使用它附带的jquery.inputmask. rerex .extensions.js。
我给输入元素一个类,在本例中是reg:
<input type="number" id="WorkSrqNo" name="WorkSrqNo" maxlength="6" class="reg"/>
然后在JavaScript中设置掩码:
var regexDigitsOnly = "^[0-9]*$";
$('input.reg').inputmask('Regex', { regex: regexDigitsOnly });
这仅适用于数字,但您可以更改正则表达式以接受“.”。
通过使用这种方法,不可能输入非数字的字符。 使用这些inputmask库进行一般格式化是很有用的。
这是一个简单的解决方案
取代。price-input输入。数量与输入字段的类
$(".price-input input.quantity").on("keypress keyup blur",function (event) {
$(this).val($(this).val().replace(/[^\d].+/, ""));
if ((event.which < 48 || event.which > 57)) {
event.preventDefault();
}
});
推荐文章
- 使伸缩项目正确浮动
- Babel 6改变了它导出默认值的方式
- 如何配置历史记录?
- ES6模板文字可以在运行时被替换(或重用)吗?
- [Vue警告]:找不到元素
- 可以在setInterval()内部调用clearInterval()吗?
- AngularJS控制器的生命周期是什么?
- 无法读取未定义的属性“msie”- jQuery工具
- 形式内联内的形式水平在twitter bootstrap?
- 我的蛋蛋怎么不见了?
- JavaScript中的排列?
- 自定义元素在HTML5中有效吗?
- JavaScript中有睡眠/暂停/等待功能吗?
- 如何触发自动填充在谷歌Chrome?
- jQuery:执行同步AJAX请求