我正在创建一个网页,其中我有一个输入文本字段,我想只允许数字字符,如(0,1,2,3,4,5…9)0-9。
我如何使用jQuery做到这一点?
我正在创建一个网页,其中我有一个输入文本字段,我想只允许数字字符,如(0,1,2,3,4,5…9)0-9。
我如何使用jQuery做到这一点?
当前回答
如果你必须解决变音符和特殊字符,尝试使用这个:
$(this).on( 'keypress', function( e )
{
// Ensure that it is a number and stop the keypress
if (e.shiftKey || (e.keyCode < 48 || e.keyCode > 57)) {
e.preventDefault();
}
});
其他回答
这里有两种不同的方法:
允许有小数点的数值 允许没有小数点的数值
方法1:
$ (" # approach1”)。上(“keypress keyup blur”,function (e) (这个美元)。瓦尔(这)。瓦尔(美元)。replace(0 - 9 \。- [^]/ g,”); 如果(e .哪! = 46 | |美元(这)。瓦尔indexOf()。 ('.') != - 1) &&(事件)。哪种< 48 | |事件。哪个> 57) 事件。preventDefault (); 的 }); <剧本剧本src = " https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js " > < / > <h2>Numeric与decimal point</h2><br/> <跨越>输入数量< /跨越> <输入类型=“文本”
方法2:
$ (" # approach2”)。上(“keypress keyup blur”,功能(事件) (这个美元)。瓦尔(这)。瓦尔(美元)。replace (- [^ \ d]。+ -”、“); 如果(事件。哪种< 48 | |事件。哪个> 57) 事件。preventDefault (); 的 }); <剧本剧本src = " https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js " > < / > <h2>Numeric without decimal point</h2><br/> <跨越>输入数量< /跨越> <输入类型=“文本”
有一个难以置信的兼容性问题,使用按键来检测被按下的字符…参见quirksmode了解更多信息。
我建议使用keyup来创建过滤器,因为这样就可以使用$(element).val()方法来计算实际的通用字符。
然后你可以过滤掉任何非数字使用正则表达式,如:
替换(/ [^ 0 - 9]/ g,”);
这就解决了所有的问题,比如移动和粘贴问题,因为总是有一个键up,所以值总是会被求值(除非javascript被关闭)。
所以…把它变成JQuery…这是我正在写的一个未完成的插件,它叫做inputmask,完成后将支持更多的掩码。现在它有数字掩码工作。
开始了……
/**
* @author Tom Van Schoor
* @company Tutuka Software
*/
(function($) {
/**
* @param {Object}
* $$options options to override settings
*/
jQuery.fn.inputmask = function($$options) {
var $settings = $.extend( {}, $.fn.inputmask.defaults, $$options);
return this.each(function() {
// $this is an instance of the element you call the plug-in on
var $this = $(this);
/*
* This plug-in does not depend on the metadata plug-in, but if this
* plug-in detects the existence of the metadata plug-in it will
* override options with the metadata provided by that plug-in. Look at
* the metadata plug-in for more information.
*/
// o will contain your defaults, overruled by $$options,
// overruled by the meta-data
var o = $.metadata ? $.extend( {}, $settings, $this.metadata()) : $settings;
/*
* if digits is in the array 'validators' provided by the options,
* stack this event handler
*/
if($.inArray('digits', o.validators) != -1) {
$this.keyup(function(e) {
$this.val(stripAlphaChars($this.val()));
});
}
/*
* There is no such things as public methods in jQuery plug-ins since
* there is no console to perform commands from a client side point of
* view. Typically only private methods will be fired by registered
* events as on-click, on-drag, etc... Those registered events could be
* seen as public methods.
*/
// private method
var stripAlphaChars = function(string) {
var str = new String(string);
str = str.replace(/[^0-9]/g, '');
return str;
}
});
};
// static public functions
//jQuery.fn.inputmask.doSomething = function(attr) {
//};
// static public members
//jQuery.fn.inputmask.someStaticPublicMember;
// some default settings that can be overridden by either $$options or
// metadata
// If you need callback functions for the plug-in, this is where they get
// set
jQuery.fn.inputmask.defaults = {
validators : []
};
})(jQuery);
要使用它,只需这样做:
$('#someElementId').inputmask({
validators: ['digits','someOtherNotYetImplementedValidator']
});
'someOtherNotYetImplementedValidator'只是在那里展示如何扩展它以用于额外的未来掩码/验证器。你可以添加或删除它,它不会破坏任何东西;-)
为这些额外杂乱的评论道歉,我使用的是我为这里的工作人员创建的模板。
希望这能有所帮助, 干杯
function suppressNonNumericInput(event){
if( !(event.keyCode == 8 // backspace
|| event.keyCode == 46 // delete
|| (event.keyCode >= 35 && event.keyCode <= 40) // arrow keys/home/end
|| (event.keyCode >= 48 && event.keyCode <= 57) // numbers on keyboard
|| (event.keyCode >= 96 && event.keyCode <= 105)) // number on keypad
) {
event.preventDefault(); // Prevent character input
}
}
function Numbers(e)
{
if($.browser.msie)
{
if(e.keyCode > 47 && e.keyCode < 58)
return true;
else
return false;
}
else
{
if((e.charCode > 47 && e.charCode < 58) || (e.charCode == 0))
return true;
else
return false;
}
}
我希望这在所有浏览器上都能工作。
我建议检查事件。我也带着。如果设置为true,用户可能会执行类似cmd-A的操作来选择字段中的所有文本。你也应该承认这一点。