Wie implementiere ich drücken und halten Sie die Taste Javascript?

Question

Ich bin ein kompletter Neuling, auf der Suche nach Anweisungen zur Implementierung von Javascript. Ich versuche, einen YUI-Schieberegler mit Schaltflächen und einem Textfeld zu ersetzen. Ich versuche, Schaltflächen zu erreichen, die, wenn sie gedrückt gehalten werden, das Textfeld weiter vergrößern werden, vorzugsweise mit einer immer höheren Geschwindigkeit. (http://www.blackbird502.com/white.htm)I haben dies in der Java-Tag im Kopf:

function holdit(btn, action, start, speedup) { 
var t; 

var repeat = function() { 
    action(); 
    t = setTimeout(repeat, start); 
    start = start/speedup; 
} 

btn.mousedown = function() { 
    repeat(); 
} 

btn.mouseup = function() { 
    clearTimeout(t); 
} 

/* to use */ 
holdit(btn, function() { }, 1000, 2); 
/* x..1000ms..x..500ms..x..250ms..x */ 

ich keine Ahnung, wie die Presse zu implementieren und halten in den folgenden im Körper:

<form><input type=button value="UP" class="btn" onClick="javascript:this.form.amount.value++;"><br /><input type=text name=amount value=5 class="text"><br /> <input type=button value="DOWN" class="btn" onClick="javascript:this.form.amount.value--;" ></form> 

Ist es möglich Dank?.

Answer 1

Dieser Code sollte alles tun, was Sie suchen; Es basiert sehr lose auf dem Beispiel von tj111. Ich habe versucht, es so wiederverwendbar wie möglich zu machen, und es braucht kein JavaScript, das mit dem HTML gemischt ist.

Sie müssen den Schaltflächen (btnUP und btnDOWN) und dem Textfeld (amount) IDs hinzufügen. Sie können diese IDs in der window.onload-Anweisung ändern.

// This function creates a closure and puts a mousedown handler on the element specified in the "button" parameter. 
function makeButtonIncrement(button, action, target, initialDelay, multiplier){ 
    var holdTimer, changeValue, timerIsRunning = false, delay = initialDelay; 
    changeValue = function(){ 
     if(action == "add" && target.value < 1000) 
      target.value++; 
     else if(action == "subtract" && target.value > 0) 
      target.value--; 
     holdTimer = setTimeout(changeValue, delay); 
     if(delay > 20) delay = delay * multiplier; 
     if(!timerIsRunning){ 
      // When the function is first called, it puts an onmouseup handler on the whole document 
      // that stops the process when the mouse is released. This is important if the user moves 
      // the cursor off of the button. 
      document.onmouseup = function(){ 
       clearTimeout(holdTimer); 
       document.onmouseup = null; 
       timerIsRunning = false; 
       delay = initialDelay; 
      } 
      timerIsRunning = true; 
     } 
    } 
    button.onmousedown = changeValue; 
} 

//should only be called after the window/DOM has been loaded 
window.onload = function() { 
    makeButtonIncrement(document.getElementById('btnUP'), "add", document.getElementById('amount'), 500, 0.7); 
    makeButtonIncrement(document.getElementById('btnDOWN'), "subtract", document.getElementById('amount'), 500, 0.7); 
} 

Answer 2

wäre die einfachste Methode, um nur eine ID zu jedem des Schaltflächen hinzufügen, dann diejenigen, die Elemente abrufen, und die Ereignisse hinzufügen.

//should only be called after the window/DOM has been loaded 
window.onload = function() { 
    //the buttons 
    var btnUP = document.getElementById('btnUP'); 
    var btnDOWN = document.getElementById('btnDOWN'); 

    //the amount 
    var amount = document.getElementById('amount'); 

    //actions to occur onclick 
    var upClick = function() { 
    amount.value++; 
    } 
    var downClick = function() { 
    amount.value--; 
    } 

    //assign the actions here 
    holdit(btnUP, upClick, 1000, 2); 
    holdit(btnDOWN, downClick, 1000, 2); 

} 


<form> 
    <input type=button value="UP" class="btn" id='btnUP'> 
    <br /> 
    <input type=text name=amount value=5 class="text" id='amount'> 
    <br /> 
    <input type=button value="DOWN" class="btn" id='btnDOWN'> 
</form> 

Answer 3

Dies ist eine Art von schnell und schmutzig, aber es sollte Ihnen einen Anfang geben. Im Grunde möchten Sie ein paar anfängliche "Konstanten" einrichten, mit denen Sie spielen können, um das gewünschte Verhalten zu erzielen. Die Anfangszeit zwischen den Inkrementen beträgt 1000 ms und wird bei jeder Iteration 90% davon (1000, 990, 891, ... 100) und hört auf, bei 100 ms kleiner zu werden. Sie können diesen Faktor anpassen, um eine schnellere oder langsamere Beschleunigung zu erhalten. Der Rest, glaube ich, ist ziemlich nah an dem, von dem ich glaube, dass du gehst. Es scheint, als ob du gerade die Event-Aufgaben verpasst hättest. In der window.onload werden Sie sehen, dass ich die Ereignisse onmouseup und onmousedown Funktionen zuweisen, die nur die increment() oder decrement() Funktionen mit Ihrem ursprünglichen Timeout oder die ClearTimeout() Funktion, um den Zähler zu stoppen.

EDIT: Ich habe dies leicht geändert, um den Fehler zu beheben. Wenn Sie jetzt den Mauszeiger von der Taste wegbewegen und den Knopf loslassen, stoppt der Zähler.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"> 
<html lang="en"> 
<head> 
    <title><!-- Insert your title here --></title> 
    <script> 

     // Fake Constants 
     var INITIAL_TIME = 1000; 
     var ACCELERATION = .9; 
     var MIN_TIME = 100; 

     // create global variables to hold DOM objects, and timer 
     var up = null, 
     down = null, 
     count = null, 
     timer = null; 

     // Increment the counter 
     function increment (time) { 
     // decrease timeout by our acceleration factor, unless it's at the minimum 
     time = (time * ACCELERATION > MIN_TIME) ? (time * ACCELERATION) : MIN_TIME; 
     count.value ++ ; 
     // set the timeout for the next round, and pass in the new smaller timeout 
     timer = setTimeout(
        function() { 
        increment(time); 
        }, time); 
     } 
     // Same as increment only subtracts one instead of adding. 
     // -- could easily make one function and pass an pos/neg factor instead 
     function decrement (time) { 
     time = time * ACCELERATION > MIN_TIME ? (time * ACCELERATION) : MIN_TIME; 
     count.value --; 
     timer = setTimeout(
        function() { 
        decrement(time); 
        }, time); 
    } 

    // Initialize the page after all the forms load 
    window.onload = function() { 
     // initialization function 

     // assign DOM objects to our vars for ease of use. 
     up = document.getElementById('up_btn'); 
     down = document.getElementById('dwn_btn'); 
     count = document.getElementById('count'); 

     // create event handlers for mouse up and down 
     up.onmousedown = function() { 
     increment(INITIAL_TIME); 
     } 
     down.onmousedown = function() { 
     decrement(INITIAL_TIME); 
     } 

     document.onmouseup = function() { 
     clearTimeout(timer); 
     } 

    } 

    </script> 
</head> 
<body> 
    <!-- Insert your content here --> 

    <form name="the_form"> 
    <input type="button" value="Up" id="up_btn" /><br /> 
    <input type="button" value="Down" id="dwn_btn" /></br> 

    <br /> 
    Count: 
    <input type="text" value="0" id="count" /> 

    </form> 

</body> 
</html> 

Answer 4

Ein Aspekt nicht übersehen werden, dass Sie in das Onclick-Ereignis sind Einhaken - die auf einem vollständigen Klick (Mouse-Taste gedrückt und Taste nach oben) passiert. Es hört sich so an, als würdest du auf ein anderes eindeutiges Ereignis hören wollen: http://www.w3schools.com/jsref/jsref_onmousedown.asp'>onMouseDown. Ich denke, wenn Sie dann einige der anderen zeitgesteuerten Lösungen implementieren würden, würden Sie bereits die Funktionalität erhalten, nach der Sie fragen.

Viel Glück!