[英]input field, only numbers jquery/js
I have a input field where i only wish users to type numbers我有一个输入字段,我只希望用户输入数字
html: <input id="num" type="text" name="page" size="4" value="" />
html: <input id="num" type="text" name="page" size="4" value="" />
jquery/ js: jQuery/js:
$("#num").keypress(function (e){
if( e.which!=8 && e.which!=0 && (e.which<48 || e.which>57)){
return false;
}
});
hope someone can help me.希望可以有人帮帮我。
btw: I'm not interesting in a larger jquery plugin to make the function work.顺便说一句:我对使用更大的 jquery 插件来使该功能起作用不感兴趣。 (I have found some jquery-plugins , but there must be som other ways to fix it, with a smaller code) (我找到了一些 jquery-plugins ,但必须有其他方法来修复它,代码更小)
Try this:试试这个:
$("#num").keypress(function (e){
var charCode = (e.which) ? e.which : e.keyCode;
if (charCode > 31 && (charCode < 48 || charCode > 57)) {
return false;
}
});
Values 48 through 57 represent the digits 0-9.值 48 到 57 代表数字 0-9。
Never do this.永远不要这样做。 A user can update a textbox without pressing the key.用户无需按键即可更新文本框。 He can copy paste, drag.他可以复制粘贴,拖动。 some text.一些文字。
Also this will be irritating to the user .这也会使用户感到恼火。
Just display a label nect to the filed saying that this accepts only numbers.只需在文件后面显示一个标签,说明它只接受数字。 And then接着
Validate your code at submission在提交时验证您的代码
Comparing to the current best answer this code is more user-friendly - it allows usage of arrows, backspace, delete and other keys/combinations:与当前的最佳答案相比,此代码更加用户友好 - 它允许使用箭头、退格、删除和其他键/组合:
// Ensures that it is a number and stops the key press
$('input[name="number"]').keydown(function(event) {
if (!(!event.shiftKey //Disallow: any Shift+digit combination
&& !(event.keyCode < 48 || event.keyCode > 57) //Disallow: everything but digits
|| !(event.keyCode < 96 || event.keyCode > 105) //Allow: numeric pad digits
|| event.keyCode == 46 // Allow: delete
|| event.keyCode == 8 // Allow: backspace
|| event.keyCode == 9 // Allow: tab
|| event.keyCode == 27 // Allow: escape
|| (event.keyCode == 65 && (event.ctrlKey === true || event.metaKey === true)) // Allow: Ctrl+A
|| (event.keyCode == 67 && (event.ctrlKey === true || event.metaKey === true)) // Allow: Ctrl+C
//Uncommenting the next line allows Ctrl+V usage, but requires additional code from you to disallow pasting non-numeric symbols
//|| (event.keyCode == 86 && (event.ctrlKey === true || event.metaKey === true)) // Allow: Ctrl+Vpasting
|| (event.keyCode >= 35 && event.keyCode <= 39) // Allow: Home, End
)) {
event.preventDefault();
}
});
Notes: The event.metaKey === true
is required for Mac users (thanks RyanM for noticing this).注意: Mac 用户需要event.metaKey === true
(感谢RyanM注意到这一点)。 Also if you uncomment Ctrl+V sequence you will need to write additional code for checking pasted text (disallow non-numeric symbols).此外,如果您取消注释 Ctrl+V 序列,您将需要编写额外的代码来检查粘贴的文本(禁止使用非数字符号)。
Here is my solution:这是我的解决方案:
function InputValidator(input, validationType, validChars) {
if (input === null || input.nodeType !== 1 || input.type !== 'text' && input.type !== 'number')
throw ('Please specify a valid input');
if (!(InputValidator.ValidationType.hasOwnProperty(validationType) || validationType))
throw 'Please specify a valid Validation type';
input.InputValidator = this;
input.InputValidator.ValidCodes = [];
input.InputValidator.ValidCodes.Add = function (item) {
this[this.length] = item;
};
input.InputValidator.ValidCodes.hasValue = function (value, target) {
var i;
for (i = 0; i < this.length; i++) {
if (typeof (target) === 'undefined') {
if (this[i] === value)
return true;
}
else {
if (this[i][target] === value)
return true;
}
}
return false;
};
var commandKeys = {
'backspace': 8,
'tab': 9,
'enter': 13,
'shift': 16,
'ctrl': 17,
'alt': 18,
'pause/break': 19,
'caps lock': 20,
'escape': 27,
'page up': 33,
'page down': 34,
'end': 35,
'home': 36,
'left arrow': 37,
'up arrow': 38,
'right arrow': 39,
'down arrow': 40,
'insert': 45,
'delete': 46,
'left window key': 91,
'right window key': 92,
'select key': 93,
/*creates Confusion in IE */
//'f1': 112,
//'f2': 113,
//'f3': 114,
//'f4': 115,
//'f5': 116,
//'f6': 117,
//'f7': 118,
//'f8': 119,
//'f9': 120,
//'f10': 121,
//'f11': 122,
//'f12': 123,
'num lock': 144,
'scroll lock': 145,
};
commandKeys.hasValue = function (value) {
for (var a in this) {
if (this[a] === value)
return true;
}
return false;
};
function getCharCodes(arrTarget, chars) {
for (var i = 0; i < chars.length; i++) {
arrTarget.Add(chars[i].charCodeAt(0));
}
}
function triggerEvent(name, element) {
if (document.createEventObject) {
// dispatch for IE
var evt = document.createEventObject();
return element.fireEvent('on' + name, evt)
}
else {
// dispatch for firefox + others
var evt = document.createEvent("HTMLEvents");
evt.initEvent(name, true, true); // event type,bubbling,cancelable
return !element.dispatchEvent(evt);
}
}
if (validationType == InputValidator.ValidationType.Custom) {
if (typeof (validChars) === 'undefined')
throw 'Please add valid characters';
getCharCodes(input.InputValidator.ValidCodes, validChars);
}
else if (validationType == InputValidator.ValidationType.Decimal) {
getCharCodes(input.InputValidator.ValidCodes, '0123456789.');
}
else if (validationType == InputValidator.ValidationType.Numeric) {
getCharCodes(input.InputValidator.ValidCodes, '0123456789');
}
input.InputValidator.ValidateChar = function (c) {
return this.ValidCodes.hasValue(c.charCodeAt(0));
}
input.InputValidator.ValidateString = function (s) {
var arr = s.split('');
for (var i = 0; i < arr.length; i++) {
if (!this.ValidateChar(arr[i])) {
arr[i] = '';
}
}
return arr.join('');
}
function bindEvent(el, eventName, eventHandler) {
if (el.addEventListener) {
el.addEventListener(eventName, eventHandler, false);
} else if (el.attachEvent) {
el.attachEvent('on' + eventName, eventHandler);
}
}
function getCaretPosition(i) {
if (!i) return;
if ('selectionStart' in i) {
return i.selectionStart;
}
else {
if (document.selection) {
var sel = document.selection.createRange();
var selLen = document.selection.createRange().text.length;
sel.moveStart('character', -i.value.length);
return sel.text.length - selLen;
}
}
}
function setCursor(node, pos) {
var node = (typeof (node) === "string" || node instanceof String) ? document.getElementById(node) : node;
if (!node) {
return false;
}
else if (node.createTextRange) {
var textRange = node.createTextRange();
textRange.collapse(true);
textRange.moveEnd(pos);
textRange.moveStart(pos);
textRange.select();
return true;
} else if (node.setSelectionRange) {
node.setSelectionRange(pos, pos);
return true;
}
return false;
}
function validateActive() {
if (input.isActive) {
var pos = getCaretPosition(input);
var arr = input.value.split('');
for (var i = 0; i < arr.length; i++) {
if (!this.ValidateChar(arr[i])) {
arr[i] = '';
if (pos > i)
pos--;
}
}
console.log('before : ' + input.value);
input.value = arr.join('');
console.log('after : ' + input.value, input);
setCursor(input, pos);
setTimeout(validateActive, 10);
}
}
bindEvent(input, 'keypress', function (e) {
var evt = e || window.event;
var charCode = evt.which || evt.keyCode;
if (!input.InputValidator.ValidCodes.hasValue(charCode) && !commandKeys.hasValue(charCode)) {
if (evt.preventDefault) {
evt.preventDefault();
evt.stopPropagation();
}
return false;
}
});
bindEvent(input, 'keyup', function (e) {
var evt = e || window.event;
var charCode = evt.which || evt.keyCode;
if (!input.InputValidator.ValidCodes.hasValue(charCode) && !commandKeys.hasValue(charCode)) {
if (evt.preventDefault) {
evt.preventDefault();
evt.stopPropagation();
}
return false;
}
});
bindEvent(input, 'change', function (e) {
var dt = input.value;
input.value = input.InputValidator.ValidateString(input.value);
if (input.value !== dt)
triggerEvent('change', input);
});
bindEvent(input, 'blur', function (e) {
var dt = input.value;
input.value = input.InputValidator.ValidateString(input.value);
input.isActive = false;
if (input.value !== dt)
triggerEvent('blur', input);
});
bindEvent(input, 'paste', function (e) {
var evt = e || window.event;
var svt = input.value;
if (evt && evt.clipboardData && evt.clipboardData.getData) {// Webkit - get data from clipboard, put into editdiv, cleanup, then cancel event
if (/text\/html/.test(evt.clipboardData.types)) {
var dt = evt.clipboardData.getData('text/html');
input.value = input.InputValidator.ValidateString(dt);
if (input.value !== dt)
triggerEvent('change', input);
}
else if (/text\/plain/.test(e.clipboardData.types)) {
var dt = evt.clipboardData.getData('text/plain');
input.value = input.InputValidator.ValidateString(dt);
if (input.value !== dt)
triggerEvent('change', input);
}
else {
input.value = '';
}
waitforpastedata(input, svt);
if (e.preventDefault) {
e.stopPropagation();
e.preventDefault();
}
return false;
}
else {// Everything else - empty editdiv and allow browser to paste content into it, then cleanup
input.value = '';
waitforpastedata(input, svt);
return true;
}
});
bindEvent(input, 'select', function (e) {
var evt = e || window.event;
if (evt.preventDefault) {
evt.preventDefault();
evt.stopPropagation();
}
return false;
});
bindEvent(input, 'selectstart', function (e) {
var evt = e || window.event;
if (evt.preventDefault) {
evt.preventDefault();
evt.stopPropagation();
}
return false;
});
/* no need to validate wile active,
removing F keys fixed IE compatability*/
//bindEvent(input, 'fucus', function (e) {
// input.isActive = true;
// validateActive();
//});
//validate current value of the textbox
{
var dt = input.value;
input.value = input.InputValidator.ValidateString(input.value);
//trigger event to indicate value has changed
if (input.value !== dt)
triggerEvent('change', input);
}
function waitforpastedata(elem, savedcontent) {
if (elem.value !== '') {
var dt = input.value;
elem.value = elem.InputValidator.ValidateString(elem.value);
if (input.value !== dt)
triggerEvent('change', input);
}
else {
var that = {
e: elem,
s: savedcontent
}
that.callself = function () {
waitforpastedata(that.e, that.s)
}
setTimeout(that.callself, 10);
}
}
}
InputValidator.ValidationType = new (function (types) {
for (var i = 0; i < types.length; i++) {
this[types[i]] = types[i];
}
})(['Numeric', 'Custom', 'Decimal']);
To apply it to an input, do the following :要将其应用于输入,请执行以下操作:
new InputValidator(document.getElementById('txtValidate'), InputValidator.ValidationType.Decimal);/* Numeric or Custom */
If you specify Custom as the validation type you have to specify the valid characters.如果您指定 Custom 作为验证类型,则必须指定有效字符。 eg :例如:
new InputValidator(document.getElementById('txtValidate'), InputValidator.ValidationType.Custom,'1234abc');
Here's my code:这是我的代码:
$("Input.onlyNumbersInput").live('input', function (event) {
$(this).val($(this).val().replace(/[^0-9]/g, ''));
});
Using "live('input')" event will make the function replace any character that is not a digit, which the user input, WITHOUT the user see the character.使用“live('input')”事件将使该函数替换用户输入的任何非数字字符,而用户看不到该字符。
If you use "onkeyup" event, the user will see the character for few miliseconds, which is not cool.如果使用“onkeyup”事件,用户会在几毫秒内看到该字符,这很不酷。
This works for me:这对我有用:
$(document).ready(function () {
$(".onlyNumbersInput").on('keyup keydown blur', function (event) {
$(this).val($(this).val().replace(/[^0-9]/g, ''));
});
});
It's based on @luizfelippe answer, updated for jquery 1.7+它基于@luizfelippe 答案,已针对 jquery 1.7+ 更新
This code allows paste and will remove any non numeric character in realtime.此代码允许粘贴并将实时删除任何非数字字符。
I think you forgot putting e.preventDefault();
我想你忘了把e.preventDefault();
before return.回来之前。
This is how I do it:这就是我的做法:
jQuery( '#input').keyup(function() {
var value = jQuery(this).val();
var newValue = value.replace(/\D/g,''); //remove letters
newValue = parseInt(newValue);
jQuery(this).val(newValue);
value = jQuery(this).val();
//just as safety, if some weird character is in the input
if( isNaN (value) || value == "" ){
jQuery(this).val(0);
}
}
The keyup event seems just fine for me to do this, I've also tried keypress and keydown . keyup事件对我来说似乎很好,我也尝试过keypress和keydown 。
My JQuery Solution.我的 JQuery 解决方案。
const validKeyCodes = [48, 49, 50, 51, 52, 53, 54, 55, 56, 57]
$('#your_input').on('keypress', function(e) {
return validKeyCodes.indexOf(e.keyCode) > -1
})
text input:文字输入:
<input id="number" type="text" />
and script:和脚本:
var number = $('#number');
number.on('input', function () {
$(this).val(getOnlyNumbers($(this).val()));
});
// this function return only numbers as string or ''
function getOnlyNumbers(value) {
let arr = value.toString().split('');
let number = [];
arr.forEach(function (elem) {
let charCode = elem.charCodeAt(0);
if (charCode > 31 && (charCode < 48 || charCode > 57)) {
} else {
number.push(elem);
}
});
return parseInt(number.join('')) || '';
}
KeyCodes or charCodes is not the best way to do this if you use numbers above letters in your laptop and don't have normal keyboard connected.如果您在笔记本电脑中使用字母上方的数字并且没有连接普通键盘,则 KeyCodes 或 charCodes 不是执行此操作的最佳方法。 And if you know these numbers above letters, starting with key `(~) , were used to add specific symbols of different nations language.如果您知道字母上方的这些数字,以键 `(~) 开头,用于添加不同国家语言的特定符号。 So only numbers will become numbers and letters.所以只有数字会变成数字和字母。 For example: key 1(!) - in Lithuanian language is ą .例如:键 1(!) - 在立陶宛语中是ą 。 So better way is to use this所以更好的方法是使用这个
var newValue = value.replace(/\D/g,'');This taken from answer above. 这取自上面的答案。
Try this Script:试试这个脚本:
var str = 5.5;
str = str.toString();
var errnum = [];
var onlyNumbers = [0,1,2,3,4,5,6,7,8,9,"0","1","2","3","4","5","6","7","8","9"];
for(i = 0; i < str.length; i++) {
if(jQuery.inArray(str[i],onlyNumbers) == -1){
errnum.push(str[i]);
}
}
if(errnum.length >= 1){
console.log('not numeric character found!');
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.