Scripts

Textbox counter

Door - - -01-10-2007 00:00 -5.550 views

Een textbox met daarnaast twee knopjes, om het getal in de textbox te verhogen of te verlagen. Het mooie is, is dat als je 'm blijft indrukken het nummertje ook echt doortikt! Probeer maar eens. Dit script is naar aanleiding van dit topic. Hartelijk dank voor Jan Koehoorn, voor het idee achter dit script en de beginversie ervan. Als je een textuele (of een andere niet integer waarde) in het veld hebt staan, en je wilt gaan spelen met de knopjes, wordt het een 0.

Download alle bestanden als ZIP

textbox-counter

[code]
<script type="text/javascript">
var mouseDown = false;
var countType;
var counter = 0;
var nextTime;

function count()
{
    if (mouseDown)
    {
        if (isNaN(document.getElementById('aantal').value))
        {
            document.getElementById('aantal').value = 0;
        }
        counter++;
        if (countType)
        {
            document.getElementById('aantal').value ++;
        }
        else
        {
            document.getElementById('aantal').value --;
        }
        nextTime = 200 / counter;
        if (nextTime < 10)
        {
            nextTime = 10;
        }
        setTimeout('count();', nextTime);
    }
}

function startCount(type)
{
    mouseDown = true;
    countType = type;
    counter = 0;
    count();
}

function stopCount()
{
    mouseDown = false;
}
</script>


<style type="text/css">
#counter-container
{
    position: relative;
    width: 200px;
    border: 1px solid #ccc;
}

#up
{
    position: absolute;
    top: 0px;
    right: 0px;
}

#down
{
    position: absolute;
    bottom: 0px;
    right: 0px;
}

#aantal
{
    font: 11px verdana;
    border: 0;
}
</style>


<noscript>Voor deze functie is JavaScript nodig.</noscript>
<div id="counter-container">
    <input id="aantal" type="text" value="0" />
    <img id="up" src="up.gif" onmousedown="startCount(true);" onmouseup="stopCount();" onmouseout="stopCount();" />
    <img id="down" src="down.gif" onmousedown="startCount(false);" onmouseup="stopCount();" onmouseout="stopCount();" />
</div>
[/code]