我想防止用户在输入字段中只键入数字。使用 JavaScript :
var shift_on = false;
$document.on('keydown', 'input[type="number"]', function(e) {
var c = e.keyCode;
if (c === KEYCODE.SHIFT)
shift_on = true;
//number using shift
if ((shift_on || isMobile) && c >= 48 && c <= 57)
return true;
if (c >= KEYCODE.NB_ZERO && c <= KEYCODE.NB_NINE
|| c === KEYCODE.BACKSPACE
|| c === KEYCODE.DEL
|| c === KEYCODE.DOT
|| c === KEYCODE.COMMA
|| c === KEYCODE.ARROW_LEFT
|| c === KEYCODE.ARROW_RIGHT
|| c === KEYCODE.SHIFT
|| c === KEYCODE.CONTROL
|| c === KEYCODE.END
|| c === KEYCODE.HOME
|| c === KEYCODE.TAB
)
return true;
else
return false;
})
它在PC上运行良好,但是如果您在移动设备上使用Safari,则按"&"和" 7"会给出相同的键代码= 55。
那么我怎么知道按键是"&"或"7"?
keyCode
并不意味着 字符。
keyCode 对于 7
和 &
对于所有 borwser 都是相同的,而不仅仅是 Safari,因为它们是键盘上的相同物理键。这也是为什么数字行 7 (55) 与数字键盘 7 (103) 是不同的键。
如果你认为这个模型已经过时了,你是对的。 keyCode 是遗留的,已弃用。
key
给你性格。
事件.key为您提供正在键入的字符。它是标准的,不像keyCode和charCode,它支持更多的键。甚至IE 9+也支持它。但是随着Safari成为新的IE...
var key = event.key || String.fromCharCode( event.charCode );
document.querySelector( 'input' ).addEventListener( 'keypress', function( event ) {
if ( event.ctrlKey || event.altKey ) return; // Control shortcuts
var key = event.key || String.fromCharCode( event.charCode ); // Safari & mobile Chrome
if ( key.length !== 1 || key === 'x00' ) return; // Non-printable keys
if ( key < '0' || key > '9' ) event.preventDefault(); // Stop non-numeric
});
<input placeholder='Number only'>
在我们手动允许箭头、Enter 或 Ctrl+V 等键后,该代码段工作正常。但是,它不会停止复制和粘贴或 IME 输入。我们能做得更好吗?
HTML5具有数字和电话号码输入功能。
根据您的需要,您可以让HTML5输入处理它,而无需编写任何JavaScript。它就像<input type='number'>
或<input type='tel'>
一样简单。浏览器将切换到正确的键盘类型,并防止提交无效输入。
<input type='number' placeholder='integer'>
<input type='number' placeholder='float' step='2'>
<input type='tel' placeholder='tel'>
或者,您可以使用 pattern 属性进行更精细的控制,而不考虑类型。
类型/模式是用户友好的,无法通过复制和粘贴或 IME 绕过,非常面向未来,并且非常易于维护。所有现代浏览器都广泛支持它们,包括古老的IE,因此请尽可能使用它们。
我会尝试使用keypress
事件(而不是keydown
),因为长按移动键盘上的键通常具有特殊意义。或者,您可以尝试检查字符代码而不是键代码来获取实际字符:
var c = String.fromCharCode(e.which);
或
var c = e.charCode;