/*container*/#container{margin:100pxauto;width:488px;}#keyboard{margin:0;padding:0;list-style:none;}#keyboardli{float:left;margin:05px5px0;width:40px;height:40px;line-height:40px;text-align:center;background:#fff;border:1pxsolid#f9f9f9;cursor:pointer;-moz-border-radius:5px;-webkit-border-radius:5px;font-size:20px;}#keyboardli:hover{position:relative;top:1px;left:1px;border-color:#e5e5e5;background:#FFF1C2;}#keyboard.delete{width:180px;font-size:20px;

js代码

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

页面代码

<div><divid="contact-form"><table><tr><td><h3>商品码:</h3></td><td><inputid="Ptraceid"class="easyui-textbox"onfocus=""></td></tr><tr><td><h4>批&nbsp;&nbsp;&nbsp;&nbsp;号:</h4></td><td><inputid="Batchid"class="easyui-textbox"></td></tr></table></div><div><inputid="ok"class="easyui-linkbutton"type="button"onclick="Bsearch('@Url.Action("WebPhoneDetails")')"value="查询"></div></div><divid="container"><ulid="keyboard"><liclass="letter">1</li><liclass="letter">2</li><liclass="letter">3</li><liclass="letter">4</li><liclass="letter">5</li><liclass="letter">6</li><liclass="letter">7</li><liclass="letter">8</li><liclass="letter">9</li><liclass="letter">0</li><liclass="letter">q</li><liclass="letter">w</li><liclass="letter">e</li><liclass="letter">r</li><liclass="letter">t</li><liclass="letter">y</li><liclass="letter">u</li><liclass="letter">i</li><liclass="letter">o</li><liclass="letter">p</li><liclass="letter">a</li><liclass="letter">s</li><liclass="letter">d</li><liclass="letter">f</li><liclass="letter">g</li><liclass="letter">h</li><liclass="letter">j</li><liclass="letter">k</li><liclass="letter">l</li><liclass="letter">z</li><liclass="letter">x</li><liclass="letter">c</li><liclass="letter">v</li><liclass="letter">b</li><liclass="letter">n</li><liclass="letter">m</li><liid="delete"class="delete">删除</li></ul></div>

最后效果 搞了两个多小时