html中如何设置文本输入数字,HTML文本输入仅允许数字输入

有没有一种快速的方法来将HTML文本输入( )设置为仅允许数字键击(加'。')？

#1楼

JavaScript代码：

function validate(evt)

{

if(evt.keyCode!=8)

{

var theEvent = evt || window.event;

var key = theEvent.keyCode || theEvent.which;

key = String.fromCharCode(key);

var regex = /[0-9]|\./;

if (!regex.test(key))

{

theEvent.returnValue = false;

if (theEvent.preventDefault)

theEvent.preventDefault();

}

}

}

HTML代码：

完美的工作原理是因为退格键代码为8，而正则表达式表达式不允许它，所以这是绕过该错误的简单方法:)

#2楼

这是geowa4解决方案的扩展版本。 支持min和max属性。 如果数字超出范围，将显示先前的值。

用法：

function number(e) {

var theEvent = e || window.event;

var key = theEvent.keyCode || theEvent.which;

if(key!=13&&key!=9){//allow enter and tab

key = String.fromCharCode( key );

var regex = /[0-9]|\./;

if( !regex.test(key)) {

theEvent.returnValue = false;

if(theEvent.preventDefault) theEvent.preventDefault();

}

}

}

$(document).ready(function(){

$("input[type=text]").filter(".number,.NUMBER").on({

"focus":function(e){

$(e.target).data('oldValue',$(e.target).val());

},

"keypress":function(e){

e.target.oldvalue = e.target.value;

number(e);

},

"change":function(e){

var t = e.target;

var min = $(t).attr("min");

var max = $(t).attr("max");

var val = parseInt($(t).val(),10);

if( val

{

alert("Error!");

$(t).val($(t).data('oldValue'));

}

}

});

});

如果输入是动态的，请使用以下命令：

$(document).ready(function(){

$("body").on("focus","input[type=text].number,.NUMBER",function(e){

$(e.target).data('oldValue',$(e.target).val());

});

$("body").on("keypress","input[type=text].number,.NUMBER",function(e){

e.target.oldvalue = e.target.value;

number(e);

});

$("body").on("change","input[type=text].number,.NUMBER",function(e){

var t = e.target

var min = $(t).attr("min");

var max = $(t).attr("max");

var val = parseInt($(t).val());

if( val

{

alert("Error!");

$(t).val($(t).data('oldValue'));

}

});

});

#3楼

最好的方法(允许所有类型的数字-实数负数，实数正数，iinteger负数，整数正数)是：

$(input).keypress(function (evt){

var theEvent = evt || window.event;

var key = theEvent.keyCode || theEvent.which;

key = String.fromCharCode( key );

var regex = /[-\d\.]/; // dowolna liczba (+- ,.) :)

var objRegex = /^-?\d*[\.]?\d*$/;

var val = $(evt.target).val();

if(!regex.test(key) || !objRegex.test(val+key) ||

!theEvent.keyCode == 46 || !theEvent.keyCode == 8) {

theEvent.returnValue = false;

if(theEvent.preventDefault) theEvent.preventDefault();

};

});

#4楼

的JavaScript

function validateNumber(evt) {

var e = evt || window.event;

var key = e.keyCode || e.which;

if (!e.shiftKey && !e.altKey && !e.ctrlKey &&

// numbers

key >= 48 && key <= 57 ||

// Numeric keypad

key >= 96 && key <= 105 ||

// Backspace and Tab and Enter

key == 8 || key == 9 || key == 13 ||

// Home and End

key == 35 || key == 36 ||

// left and right arrows

key == 37 || key == 39 ||

// Del and Ins

key == 46 || key == 45) {

// input is VALID

}

else {

// input is INVALID

e.returnValue = false;

if (e.preventDefault) e.preventDefault();

}

}

另外，您可以添加逗号，句点和减号(，.-)

// comma, period and minus, . on keypad

key == 190 || key == 188 || key == 109 || key == 110 ||

的HTML

#5楼

很简单....

//在JavaScript函数中(可以使用HTML或PHP)。

function isNumberKey(evt){

var charCode = (evt.which) ? evt.which : evt.keyCode;

if (charCode > 31 && (charCode < 48 || charCode > 57))

return false;

return true;

}

在表单输入中：

最大输入 (以上允许输入12位数字)

来源：oschina

链接：https://my.oschina.net/stackoom/blog/3145019