Keyboard Event: skips/swaps letter when typed too fast

[Binaca]

I am new to Javascript and have an issue (about keyboard events) that I am trying to fix. I read the section on Keyboard Events.

The issue is that I have 3 text boxes followed by a NEXT button. Each text box can take only ONE character (a…z) in each box. When I type the letters too fast, it does not work. E.g. Lets say I need to type ‘t’ (in first box), ‘h’ (in the second box), and ‘e’ (in the third box). If I type “the” too fast, I get the following:

BOX1 BOX2 BOX3
t e
t h
t e h

Can you look at my code below and suggest what I would need to do so that typing quickly does not skip/swap the letter in the box. Currently, the ‘setTimeout’ call has ‘10’ as my timeout and I tried to reduce this number but no luck.

define([
‘jquery’,
‘underscore’,
‘backbone’,
…
…
], function ($, _, Backbone, htmlTemplate, TextInput) {

return Backbone.View.extend({
    firstInput: null,
    secondInput: null,
    thirdInput: null,
   
    events: {
        'keyup input#ehi-firstletter': "moveToNext",
        'keyup input#ehi-secondletter': "moveToNext",
        'keyup input#ehi-thirdletter': "onThirdLetterKeyUp",
        'keydown input#ehi-firstletter': "setBoxFocus",
        'keydown input#ehi-secondletter': "setBoxFocus",
        'keydown input#ehi-thirdletter': "setBoxFocus",
        'blur input#ehi-firstletter': "onFirstLetterBlur",
        'blur input#ehi-secondletter': "onSecondLetterBlur",
        'blur input#ehi-thirdletter': "onThirdLetterKeyUp",
    },

    initialize: function () {
        this.firstInput = new TextInput({el: '<li id="ehi-first"></li>', labelText: "", textId: "ehi-firstletter", maxlength: "1"});
        this.secondInput = new TextInput({el: '<li id="ehi-second"></li>', labelText: "", textId: "ehi-secondletter", maxlength: "1"});
        this.thirdInput = new TextInput({el: '<li id="ehi-third"></li>', labelText: "", textId: "ehi-thirdletter", maxlength: "1"});
        var $this = this;
        _.defer(function () {
            $this.$el.find("#ehi-firstletter").focus();
        });
    },
    render: function () {
        this.setElement(htmlTemplate);
        this.firstInput.render();
        this.secondInput.render();
        this.thirdInput.render();
        this.$el.find('.search-letters').append(this.firstInput.el, this.secondInput.el, this.thirdInput.el);
    },

    onNext: function () {
        this.validateEntry();

        if(!this.inputError) {
            this.facade.pub("AppContainer:glass", []);
            this.facade.pub("showList", [this.list]);
            return true;
        }
        return false;
    },

    moveToNext: function (event) {
        var first =  this.$el.find("#ehi-firstletter");
         var second =  this.$el.find("#ehi-secondletter");
         var third =  this.$el.find("#ehi-thirdletter");

        if (event.target.id == "ehi-secondletter" && (event.which == 13 || event.keyCode == 13)) {
            event.preventDefault();
            this.onNext();
            return;
        }

        if ((event.which >64 && event.which < 91) || event.which == 32 ) {              
            if (event.target.id == "ehi-firstletter") {
                if(event.which != 32) {
                 setTimeout(function () {
                         second.focus();
                     }, 10);
                }
            }
            else if (event.target.id == "ehi-secondletter") {
                setTimeout(function () {
                        third.focus();
                   }, 10);
            }
        }else{
            event.preventDefault();
        }
    },
   
    setFirstLetterFocus: function () {
        var $this = this;
        _.defer(function () {
            $this.$el.find("#ehi-firstletter").focus();
        });
    },

    setBoxFocus: function (event){
        var first =  this.$el.find("#ehi-firstletter");
        var second =  this.$el.find("#ehi-secondletter");
        var third =  this.$el.find("#ehi-thirdletter");
        if (event.which == 32) event.preventDefault();

        if (event.which == 8){
               if (event.target.id == "ehi-thirdletter") {
                    if (third.val() == ""){
                     setTimeout(function () {
                                temp=second.val();
                               if (third.val() == ""){
                                 second.val('');
                                 second.focus();
                                second.val(temp);
                               }
                     }, 10);
                   }
               }else if (event.target.id == "ehi-secondletter") {
                   if (second.val() == ""){
                    setTimeout(function () {
                        temp=first.val();
                        if (second.val() == ""){
                             first.val('');
                             first.focus();
                             first.val(temp);
                        }
                       }, 10);
                   }
               }
        }
    },

    onFirstLetterBlur: function (event) {
        if (this.$el.find("#ehi-firstletter").val() == "" || this.$el.find("#ehi-secondletter").val() == "" || this.$el.find("#ehi-thirdletter").val() == "") {
            return;
        }
    },

    onSecondLetterBlur: function (event) {
        if (this.$el.find("#ehi-firstletter").val() == "" || this.$el.find("#ehi-secondletter").val() == "") {
            return;
        }
    },

    onThirdLetterKeyUp: function (ev) {
        if (ev.which == 13 || ev.keyCode == 13) {
            this.onNext();
        }
    },      

});