Q:

JS text input history on up arrow

Im trying to build in a history in a text field, where the user may press the up arrow and see the previous text that was written in the field.
So far i have managed to track previous inputs: http://jsfiddle.net/gLhkr3mL/
var prevCommand = [];
var commandCount = 0;
var keyCount = 0;
$("#form-prompt").on("submit", function (e) {
    commandCount++;
    keyCount = 0;
    prevCommand[commandCount] = $('#textTest').val();
    e.preventDefault();
    $('#textTest').val(''); 
});

$(document).keydown(function(event){
    if(event.which == 38 && $("#textTest").is(":focus")){
        keyCount++;
        if(typeof prevCommand[keyCount] !== "undefined") {
            $('#res').append('<hr>'+prevCommand[keyCount]);
        }
    }else if(event.which == 40 && $("#command-text").is(":focus")) {

    }
});

The problem im facing is that in this case the history will be shown in the wrong order, as i want the newest input to come first and so forth.

A:

See this updated fiddel. Right now you are going from the first index of the array. You have to change it so that you go from the last element to the first. Also add a submit button sothat you can test the bahavour.

var prevCommand = [];
var commandCount = 0;
var keyCount = 0;
$("#form-prompt").on("submit", function (e) {
 commandCount++;
 keyCount = 0;
 prevCommand[commandCount] = $('#textTest').val();
 e.preventDefault();
    $('#textTest').val(''); 
});


$(document).keydown(function(event){
 if(event.which == 38 && $("#textTest").is(":focus")){
  keyCount++;
        var index = prevCommand.length-keyCount;
  if(typeof prevCommand[index ] !== "undefined") {                
   $('#res').append('<hr>'+prevCommand[index]);
  }
 }else if(event.which == 40 && $("#command-text").is(":focus")) {

 }
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<form id='form-prompt'>
<input type='text' id='textTest'>
    <input type="submit" />
</form>
<div id='res'></div>

Separate your history logic
Right now the history implementation looks messy and hard to read. You may try to separate the history storage from the main logic like below. Feels good to read. :)

var store = {

    keyCount:0,
    commandCount:0,
    prevCommand:[],
    put : function(val) {        
        this.commandCount++;
        this.keyCount = this.commandCount;
        this.prevCommand.push(val);        
    },
    get : function() {
        this.keyCount--;
        if(typeof this.prevCommand[this.keyCount] !== "undefined") {
            return this.prevCommand[this.keyCount];
        }    
    }    

}


$("#form-prompt").on("submit", function (e) {
 store.put($('#textTest').val())
 e.preventDefault();
    $('#textTest').val(''); 
});

$(document).keydown(function(event){
 if(event.which == 38 && $("#textTest").is(":focus")){
         var val = store.get();
   val && $('#res').append('<hr>'+val);
 }else if(event.which == 40 && $("#command-text").is(":focus")) {

 }
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<form id='form-prompt'>
<input type='text' id='textTest'>
    <input type="submit" />
</form>
<div id='res'></div>

