[英]increase number when I press arrow key on keyboard with javascript
I have a textbox has a numeric value.我有一个文本框有一个数值。 now what I want is to keep increasing that numeric value while im pressing and holding any of arrow keys.
现在我想要的是在按住任何箭头键的同时继续增加该数值。 I know how to do this if I was pressing only one time.
如果我只按一次,我知道该怎么做。 it will be increased by 1 only.
它只会增加1。 but what If I want to keep increasing the value while i'm holding the arrow keys.
但是如果我想在按住箭头键的同时继续增加值怎么办。 how to do that?
怎么做?
thanks谢谢
There's a small jQuery plugin for doing this: https://github.com/nakupanda/number-updown 有一个小的jQuery插件可以做到这一点: https : //github.com/nakupanda/number-updown
Usages: 用途:
$('#simplest').updown();
$('#step').updown({ step: 10, shiftStep: 100 }); $('#step')。updown({step:10,shiftStep:100});
$('#minMax').updown({ min: -10, max: 10 }); $('#minMax')。updown({min:-10,max:10});
$('#minMaxCircle').updown({ min: -10, max: 10, circle: true }); $('#minMaxCircle')。updown({min:-10,max:10,circle:true});
View live demo here: http://jsfiddle.net/XCtaH/embedded/result/ 在此处查看现场演示: http : //jsfiddle.net/XCtaH/embedded/result/
Keyboard and mousewheel events supporte 键盘和鼠标滚轮事件支持
This is not fully tried and tested by me, but here is a thought - You might want to track KeyDown events because that's the event which is queued by the OS when the key is first pressed. 这不是我完全尝试和测试过的,但是有一个想法-您可能要跟踪KeyDown事件,因为这是第一次按下键时操作系统排队的事件。 You might also want to implement some sort of delay when incrementing this way so as not to overwhelm the client-side script and have numbers change at a speed to high for user to track.
您可能还希望在以这种方式递增时实现某种程度的延迟,以免使客户端脚本不知所措,并使数字以很高的速度变化以供用户跟踪。
If you don't care about supporting Opera, this is easy: 如果您不关心支持Opera,那么这很容易:
textbox.onkeydown = function(e)
{
if (e.keyCode == 38)
{
incrementTextBox();
}
}
However, Opera doesn't fire keydown
for key repeats... you'll have to mimic that by calling incrementTextBox()
at an interval, and stopping when the key is lifted. 但是,Opera不火
keydown
关键重复......你必须通过调用来模仿incrementTextBox()
的间隔,而当钥匙解除停止。 I tested this in WebKit (Chrome 6.0), FF3, Opera 10.6, IE7, IE8, IE9, even IE Quirks: 我在WebKit(Chrome 6.0),FF3,Opera 10.6,IE7,IE8,IE9甚至IE Quirks中对此进行了测试:
var textbox = null;
window.onload = function()
{
var timeoutId = null;
var intervalId = null;
var incrementRepeatStarted = false;
function startIncrementKeyRepeat()
{
timeoutId = window.setTimeout(function()
{
intervalId = window.setInterval(incrementTextBox, 50);
}, 300);
}
function abortIncrementKeyRepeat()
{
window.clearTimeout(timeoutId);
window.clearInterval(intervalId);
timeoutId = null;
intervalId = null;
}
function endIncrementKeyRepeat()
{
abortIncrementKeyRepeat();
incrementRepeatStarted = false;
}
textbox = document.getElementById("incrementer");
textbox.onkeydown = function(e)
{
e = e || window.event;
if (e.keyCode == 38)
{
if (!incrementRepeatStarted)
{
startIncrementKeyRepeat();
incrementRepeatStarted = true;
}
else if (timeoutId || intervalId)
{
abortIncrementKeyRepeat();
}
incrementTextBox();
}
else if (incrementRepeatStarted)
{
endIncrementKeyRepeat();
}
}
textbox.onkeyup = endIncrementKeyRepeat;
}
function incrementTextBox()
{
var val = parseInt(textbox.value) || 0;
val++;
textbox.value = val;
}
ok after some tests I made here is how its done: 我在这里做了一些测试后确定是如何完成的:
var setTimeoutId;
var keyIs = "up";
function myIncrementFunction()
{
var num = parseFloat(myText.value)+1;
myText.value = num;
}
myText.onkeydown = function(e)
{
keyIs = "down";
if(keyIs == "down")
{
var e = e || event ;
if (e.keyCode == 38)
{
for(var s=0; s<1; s++)
setTimeoutId = setTimeout('myIncrementFunction()',100);
}
}
}
myText.onkeyup = function(e)
{
keyIs = "up";
}
我想这样做,我只是使用 type="number" 的输入字段
"
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.