更新
我已经修复了有错误的代码并添加了一个名为 key 的 var 来存储使用 keyCode 和 which 的按键代码,这取决于浏览器。
var key = e.which || e.keyCode;
感谢唐纳德.麦克莱恩 :)
如果您想在输入时检查您是否正在输入数字(并避免在输入字段中输入其他字符),您可以使用这个简单的功能,您可以定义允许的元素(这包括您想要过滤的任何内容)。通过这种方式,您不仅可以选择整数,还可以选择例如某组字符。该示例基于 jQuery 将其附加到输入字段。
$('#myInputField').keypress(function(e)
{
var key = e.which || e.keyCode;
if (!(key >= 48 && key <= 57) && // Interval of values (0-9)
(key !== 8) && // Backspace
(key !== 9) && // Horizontal tab
(key !== 37) && // Percentage
(key !== 39) && // Single quotes (')
(key !== 46)) // Dot
{
e.preventDefault();
return false;
}
});
如果您使用定义以外的其他键,它将不会出现在该字段中。而且因为 Angular.js 这些天变得越来越强大。这是您可以在 Web 应用程序的任何字段中创建的指令:
myApp.directive('integer', function()
{
return function (scope, element, attrs)
{
element.bind('keydown', function(e)
{
var key = e.which || e.keyCode;
if (!(key >= 48 && key <= 57) && // Interval (0-9)
(key !== 8) && // Backspace
(key !== 9) && // Horizontal tab
(key !== 37) && // Percentage
(key !== 39) && // Single quotes (')
(key !== 46)) // Dot
{
e.preventDefault();
return false;
}
});
}
});
但是如果你想使用ng-repeat 并且你只需要在一定数量的字段中应用这个指令会发生什么。好吧,您可以将上面的指令转换为准备接受 true 或 false 值的指令,以便能够决定哪个字段将受到它的影响。
myApp.directive('rsInteger', function() {
return {
restrict: 'A',
link: function (scope, element, attrs) {
if (attrs.rsInteger === 'true') {
element.bind('keydown', function(e)
{
var key = e.which || e.keyCode;
if (!(key >= 48 && key <= 57) && // Interval (0-9)
(key !== 8) && // Backspace
(key !== 9) && // Horizontal tab
(key !== 37) && // Percentage
(key !== 39) && // Single quotes (')
(key !== 46)) // Dot
{
e.preventDefault();
return false;
}
});
}
}
}
});
要使用这个新指令,您只需在输入类型文本中执行它,例如:
<input type="text" rs-integer="true">
希望对你有所帮助。