Key up event that executes when 5 characters are entered

Question

So I have a function that fires when a user enters in 5 characters in an input field.

However, whenever I place additional characters after the 5 has been fulfilled it keeps on firing the event.

How do I prevent this from occurring?

$(function(){
    var $zipEntry = $('#zipEntry').bind('keyup',function(event) { //bind to key up, doesn't require 
    //make sure that there are 5 numbers... or length = 5 since numeric only input
    var $this = $(this); // cache $(this)

        if ($this.val().length == 5){ // use cached 
            console.log("There are 5 characters!!");
            $this.trigger('zipEntered'); 
        }
    });

Answer 1

If i understand you correctly, you need use "greater or equal" instead "equal"

if ($this.val().length >= 5){

Also, why do you use $ in variable names??

Answer 2

Try unbinding the event after you're done listening for it.

if ($this.val().length == 5){
    console.log("There are 5 characters!!");
    $this.trigger('zipEntered');
    $('#zipEntry').unbind('keyup');
}

Answer 3

Can't the problem be corrected at the source? Put a maxlength on the input field?