有人知道如何將文本字段變成只允許用戶輸入數字的JavaScript嗎?我知道這可以用Google搜索,但解決方案都是一樣的:(http://www.htmlcodetutorial.com/forms/index_famsupp_158.html)。我想要的是過濾不僅來自鍵盤的任何輸入,而且也來自鼠標,比如複製&在該字段上粘貼非數字值。任何幫助將不勝感激。僅限終極數字文本字段
回答
使用onChange
:
<INPUT NAME="dollar" SIZE=5 MAXLENGTH=5 onChange="this.value = this.value.replace(/[^0-9]/g, '')">
注:在FF3至少它只能運行值已經經過「確認」,框失去焦點或其他而不是瞬間。
字符替換不起作用。 – blackstrider 2011-05-29 20:08:40
不好意思忘了'this.value ='部分。現在它是固定的。 – Jonathon 2011-05-29 22:26:29
立即工作。非常感謝! – blackstrider 2011-05-30 03:58:15
可以使用的間隔功能(setInterval
)以週期性地驗證字段輸入。 This jsfiddle是一個簡單的例子。
基本上它可以看起來像:
function chkNumeric(){
if (!(/^[0-9]$/.test(document.getElementById([id of numeric input]).value)){
// do things
}
}
setInterval(chkNumeric,250);
這將是一個CPU豬,這種工作完全沒有必要。 JS環境支持只是正確工具的事件。 – 2011-05-29 23:37:29
這可以完成這項工作,但不是因爲我有很多腳本正在運行,所以我現在沒有。感謝這個想法。可以派上用場,供其他將來參考。 – blackstrider 2011-05-30 04:00:51
@etrange這裏查看評論:HTTP://stackoverflow.com/questions/6169140/what-javascript-functions-exist-that-i-can-use-to-check-that-an-email-and-phone/ 6169232#6169232 – KooiInc 2011-05-30 06:31:41
這裏是我的解決方案(這也驗證了數據複製&粘貼):
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, '.');
}
else if (validationType == InputValidator.ValidationType.Numeric) {
getCharCodes(input.InputValidator.ValidCodes, '');
}
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']);
將其應用到輸入,請執行以下操作:
new InputValidator(document.getElementById('txtValidate'), InputValidator.ValidationType.Decimal);/* Numeric or Custom */
如果自定義指定爲驗證鍵入您必須指定有效的字符。 如:從下面給出的所有答案
new InputValidator(document.getElementById('txtValidate'), InputValidator.ValidationType.Custom,'1234abc');
- 1. 終極版表字段
- 2. 僅限二進制數字文本框
- 3. 基於相同形式的數字字段的文本字段字符限制
- 4. jQuery字符計數,分爲兩個文本框的極限
- 5. 如何限制僅使用空格創建文本字段?
- 6. 僅限IE的文本字段背景圖像
- 7. iPhone僅限文本字段一個輸入類型
- 8. 材料UI文本字段第i個終極版的形式發佈
- 9. 僅限英文字符
- 10. 如何限制Swift中2個文本字段中的數字?
- 11. 在JQuery中限制文本字段的字數
- 12. Javascript輸入字段驗證(僅限數字)
- 13. 文本字符數限制
- 14. 僅限數字密碼
- 15. 限制文本字段長度
- 16. j2me設置文本字段限制
- 17. 如何爲數字文本字段和字母文本字段設置鍵盤?
- 18. 將文本框限制爲僅限數字或數字小鍵盤 - 無特殊字符
- 19. Unity3d 4.6 beta17 UI僅限數字輸入文本
- 20. jquery:僅限數字輸入,但也限制字符數
- 21. jquery - 數字只有文本字段
- 22. 陣營 - 終極版:如何讓驗證碼必填字段
- 23. 終極版形式 - 光標跳到輸入字段結束
- 24. 如何使用正常化終極版 - 表單字段部件
- 25. Yii - 如何驗證僅用於文本的文本字段
- 26. C++ MFC整數文本字段始終設置爲0?
- 27. 文本字段應該只允許字母數字,不僅包括字母和數字?
- 28. 將日期文本字段設置爲數字日期字段
- 29. 終止文本字符
- 30. 將VBA userform文本框中的輸入限制爲僅限數字
APPART,我也給你輸入的型號,至少,如果你編碼HTML5的網站,這是去最面向未來的方式。輸入類型=數字將確保只有數字可以在支持它的瀏覽器中輸入。要檢查它是否受支持,可以使用像modernizr JavaScript庫這樣的東西。如果不是,您可以使用JavaScript後備。 – bigblind 2011-05-29 22:39:07