augmenter le nombre quand j'appuie sur la touche fléchée du clavier avec javascript

Question

J'ai une zone de texte a une valeur numérique. maintenant ce que je veux est de continuer à augmenter cette valeur numérique tout en im pressant et en maintenant l'une des touches fléchées. Je sais comment faire si je n'appuyais qu'une seule fois. il sera augmenté de 1 seulement. mais que faire si je veux continuer à augmenter la valeur pendant que je tiens les touches fléchées. comment faire ça?

grâce

Answer 1

Ce n'est pas complètement essayé et testé par moi, mais voici une pensée - Vous pouvez suivre KeyDown événements parce que c'est l'événement qui est mis en attente par le système d'exploitation lorsque la clé est d'abord pressée. Vous pouvez également implémenter une sorte de retard lors de l'incrémentation de cette manière afin de ne pas submerger le script côté client et que les numéros changent à une vitesse trop élevée pour que l'utilisateur puisse effectuer le suivi.

Answer 2

Si vous ne se soucient pas de soutenir Opera, c'est facile:

textbox.onkeydown = function(e) 
{ 
    if (e.keyCode == 38) 
    { 
     incrementTextBox(); 
    } 
} 

Cependant, Opera ne se déclenche pas keydown pour les répétitions clés ... vous devrez imiter que en appelant à incrementTextBox() un intervalle, et l'arrêt lorsque la clé est levée. Je l'ai testé cela dans WebKit (Chrome 6.0), FF3, Opera 10.6, IE7, IE8, IE9, même 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; 
} 

Answer 3

ok après quelques tests que j'ai fait voici comment son fait:

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"; 
} 

Answer 4

Il y a un petit plugin jQuery pour ce faire: https://github.com/nakupanda/number-updown

Usages:

$('#simplest').updown(); 

$ ('# step'). Updown ({ étape: 10, shiftStep: 100 });

$ ('# minmax') updown ({ min: -10, max: 10 }). .

$ ('# de minMaxCircle') updown ({ min: -10, max: 10, cercle: true} );

Voir la démo en direct ici: http://jsfiddle.net/XCtaH/embedded/result/

clavier et événements mouseWheel supportAchat