js 小键盘需求

/* container */
#container {
margin: 100px auto;
width: 488px;
}

#keyboard {
margin: 0;
padding: 0;
list-style: none;
}

#keyboard li {
float: left;
margin: 0 5px 5px 0;
width: 40px;
height: 40px;
line-height: 40px;
text-align: center;
background: #fff;
border: 1px solid #f9f9f9;
cursor: pointer;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
font-size: 20px;
}

#keyboard li:hover {
position: relative;
top: 1px;
left: 1px;
border-color: #e5e5e5;
background: #FFF1C2;
}

#keyboard .delete {
width: 180px;
font-size: 20px;

$(function () {
$("#Batchid").bind('focus', function () {
//键盘显示
$("#container").show();
});
//点击
$(".letter").bind('click', function () {
$("#Batchid").val($("#Batchid").val() + "" + $(this).html());
});
//删除
$("#delete").bind('click', function () {
var html = $("#Batchid").val()

$("#Batchid").val(html.substr(0, html.length - 1));
});

});

<div style="margin-left:-30px;">
<div id="contact-form">
<table style="text-align:center;margin:0 auto;">
<tr>
<td>
<h2>商品码:</h2>
</td>
<td>
<input id="Ptraceid" class="easyui-textbox" style="width:300px;height:32px;margin-top:90px;font-size:25px;border-radius: 4px;" onfocus="">
</td>
</tr>
<tr>
<td>
<h3>批    号:</h3>
</td>
<td>
<input id="Batchid" class="easyui-textbox" style="width:300px;height:32px;margin-top:40px;font-size:25px;border-radius: 4px;">

</td>
</tr>
</table>
</div>
<div style="text-align:center">
<input id="ok" class="easyui-linkbutton" type="button" onclick="Bsearch('@Url.Action("WebPhoneDetails")')" value="查  询">
</div>
</div>

<div id="container" style="margin-top:10px;display:none">
<ul id="keyboard">
<li class="letter">1</li>
<li class="letter">2</li>
<li class="letter">3</li>
<li class="letter">4</li>
<li class="letter">5</li>
<li class="letter">6</li>
<li class="letter">7</li>
<li class="letter">8</li>
<li class="letter">9</li>
<li class="letter">0</li>
<li class="letter">q</li>
<li class="letter">w</li>
<li class="letter">e</li>
<li class="letter">r</li>
<li class="letter">t</li>
<li class="letter">y</li>
<li class="letter">u</li>
<li class="letter">i</li>
<li class="letter">o</li>
<li class="letter">p</li>
<li class="letter">a</li>
<li class="letter">s</li>
<li class="letter">d</li>
<li class="letter">f</li>
<li class="letter">g</li>
<li class="letter">h</li>
<li class="letter">j</li>
<li class="letter">k</li>
<li class="letter">l</li>
<li class="letter">z</li>
<li class="letter">x</li>
<li class="letter">c</li>
<li class="letter">v</li>
<li class="letter">b</li>
<li class="letter">n</li>
<li class="letter">m</li>
<li id="delete" class="delete">删除</li>
</ul>
</div>