JqueryUI Keyboard

HTML

<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.11/themes/ui-lightness/jquery-ui.css">
<p>ZipCode 
<input type="text-field" id="zipInput" max-character="3" >
</p>
<button id="keyboard">
Keyboard
</button>
<br><br>
<div id="numpadCon"></div>

CSS

body { font: normal normal normal 10px/1.5 Arial, Helvetica, sans-serif; }

.specs{
  max-width:290px;
}
.delBtn{
}
.numBtn {
  display:inline-block;
  padding:5px;
  width:50px;
  height:50px;
  border:thin solid grey;
}

JavaScript

var keyboardCon = $('<div>').addClass("spec");

//numpad numerals
for(var i=1; i<10; i++){
	var numBtn = createNumBtn(i);
  keyboardCon.append(numBtn);
}

//numpad del btn
var del = $('<button>').text('DEL').addClass('numBtn').click(function(){
	var currVal =  $('#zipInput').val();
  if(currVal.length > 1){
  	currVal = currVal.substring(0, currVal.length-1);
  	$('#zipInput').val(currVal);
	}else{
  	$('#zipInput').val("");
  }
}).appendTo(keyboardCon);

//numpad zero btn
var zeroBtn = createNumBtn(0);
zeroBtn.appendTo(keyboardCon);

//numpad clear btn
var clear = $('<button>').text('CLEAR').addClass('numBtn').click(function(){
	$('#zipInput').val("");
}).appendTo(keyboardCon);

function createNumBtn(val){
	return $('<button>')
  	.click(function(){
    	var userInput = this.innerHTML;
      //allow only up to 5 characters
      var len = $('#zipInput').val().length;
      if(len < 4){
      	console.log(userInput);
      	var currVal =  $('#zipInput').val();
     		$('#zipInput').val(currVal + userInput);
     	}else{
      	//close dialog
        if(len < 5){
        	var currVal =  $('#zipInput').val();
     			$('#zipInput').val(currVal + userInput);
        }
        closeDialog();
      }
    }).addClass("numBtn").text(val);
}

//hide the div but set it in the body
keyboardCon.hide();
$('#numpadCon').append(keyboardCon);

//dialog
keyboardCon.dialog({
		title: false,
    modal: false,
    autoOpen:false,
    draggable: true,
    resizable: false,
    //hide title header
    open: function() { $(this).closest(".ui-dialog").find(".ui-dialog-titlebar:first").hide(); },
    //show: 'blind',
    //hide: 'blind',
    width: 190,
    dialogClass: 'ui-dialog-osx',
    buttons: {
        "Done": function() {
            $(this).dialog("close");
        }
    }
});

function closeDialog(){
	keyboardCon.dialog('close');
}

//zip
$('#keyboard').on('click',function(){
	console.log("open dialog");
  if(keyboardCon.dialog('isOpen')){
  	keyboardCon.dialog('close');
 ...