Jan
2
2011
Javascript

Class: bind een keyup event vast

Author Een artikel door Willem    Comments Geen reacties

Deze mini class is ontwikkeld voor bijvoorbeeld AJAX functies. Vaak is een gebruiker aan het typen en verschijnt alvast een naam in het beeld.
Een soort auto fill functie dus. Hier kan je je eigen functie aan vast plakken zodat je er mee kan doen wat je wilt.

Standaard controleert hij pas na 3 chars, om een heel hoog aantal requests te voorkomen.
Als extra check zit er nog in dat als de gebruiker een keyup event veroorzaakt (dus wanneer de gebruiker de toets “loslaat”)
krijgt de gebruiker 800Ms de tijd om nog een toetsaanslag te doen. Gebeurd dit niet, dan vind er een functie aanroep plaats.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
   "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>

    <script type="text/javascript">

    	function keyDigger(field, keyUpFunction) {

            if (!document.getElementById(field)) return false;
                     alert(field);

            var _self = this;

            this.inputElement		= document.getElementById(field);
            this.charsBeforeAction	= 3;
            this.intervalTimer		= false;
            this.eventFunction		= keyUpFunction;
            this.inputElement.ref	= _self;
            this.timerMs			= 800;
            this.bind();

        }

        keyDigger.prototype.bind	= function() {

            this.inputElement.onkeyup = function(execute) {

                if (isNaN( this.ref.intervalTimer)) {
                    clearTimeout(this.ref.intervalTimer);
                }

                var me = this;
                if (this.value.length > this.ref.charsBeforeAction) {
                    this.ref.intervalTimer = setTimeout(function() {
                        me.ref.eventFunction(me.value);
                    }, this.ref.timerMs);
                }
            }
        }

        window.onload = function() {
        //voorbeeld
        var t = new keyDigger('yourName', keyUp);

        }
        function keyUp(param) {
            document.getElementById('test').value =  "Je schreef : " +(param);
        }

       </script>
 </head>
 <body>

    <input type="text" id="yourName" />
    <input type="text" id="test" />
</body>
</html>
Tags: , ,

Related Posts

Over de auteur: Willem

Willem is lead developer bij een toonaangevend bedrijf. Verder ook eigenwijs en deelt graag te pas en te onpas informatie.

Reageer