网页中如何实现小键盘的功能，具体问题如下

<html>
<head>
<title></title>
<style type="text/css">
input.btn{
border:solid 1px #999999;
width:36px;
height:36px;
}
input.txt{
border:solid 1px #999999;
}
</style>
</head>
<body onload="init()">
<table border=0>
<tr>
<td><input type=text ID="Text1" NAME="Text1" class="txt"></td>
</tr>
<tr>
<td><input type=text ID="Text2" NAME="Text2" class="txt"></td>
</tr>
<tr>
<td><input type=text ID="Text3" NAME="Text3" class="txt"></td>
</tr>
<tr>
<td><input type=text ID="Text4" NAME="Text4" class="txt"></td>
</tr>
<tr>
<td><input type=text ID="Text5" NAME="Text5" class="txt"></td>
</tr>
<tr>
<td><input type=text ID="Text6" NAME="Text6" class="txt"></td>
</tr>
<tr>
<td><input type=text ID="Text7" NAME="Text7" class="txt"></td>
</tr>
<tr>
<td><input type=text ID="Text8" NAME="Text8" class="txt"></td>
</tr>
<tr>
<td><input type=text ID="Text9" NAME="Text9" class="txt"></td>
</tr>
<tr>
<td><input type=text ID="Text10" NAME="Text10" class="txt"></td>
</tr>
<tr>
<td><input type=text ID="Text11" NAME="Text11" class="txt"></td>
</tr>
<tr>
<td><input type=text ID="Text12" NAME="Text12" class="txt"></td>
</tr>
<tr>
<td><input type=text ID="Text13" NAME="Text13" class="txt"></td>
</tr>
<tr>
<td><input type=text ID="Text14" NAME="Text14" class="txt"></td>
</tr>
<tr>
<td><input type=text ID="Text15" NAME="Text15" class="txt"></td>
</tr>
<tr>
<td><input type=text ID="Text16" NAME="Text16" class="txt"></td>
</tr>
<tr>
<td><input type=text ID="Text17" NAME="Text17" class="txt"></td>
</tr>
<tr>
<td><input type=text ID="Text18" NAME="Text18" class="txt"></td>
</tr>
<tr>
<td><input type=text ID="Text19" NAME="Text19" class="txt"></td>
</tr>
<tr>
<td><input type=text ID="Text20" NAME="Text20" class="txt"></td>
</tr>
<tr>
<td><input type=text ID="Text21" NAME="Text21" class="txt"></td>
</tr>
<tr>
<td><input type=text ID="Text22" NAME="Text22" class="txt"></td>
</tr>
<tr>
<td><input type=text ID="Text23" NAME="Text23" class="txt"></td>
</tr>
<tr>
<td><input type=text ID="Text24" NAME="Text24" class="txt"></td>
</tr>
<tr>
<td><input type=text ID="Text25" NAME="Text25" class="txt"></td>
</tr>
<tr>
<td><input type=text ID="Text26" NAME="Text26" class="txt"></td>
</tr>
<tr>
<td><input type=text ID="Text27" NAME="Text27" class="txt"></td>
</tr>
<tr>
<td><input type=text ID="Text28" NAME="Text28" class="txt"></td>
</tr>
<tr>
<td><input type=text ID="Text29" NAME="Text29" class="txt"></td>
</tr>
<tr>
<td><input type=text ID="Text30" NAME="Text30" class="txt"></td>
</tr>
<tr>
<td><input type=text ID="Text31" NAME="Text31" class="txt"></td>
</tr>
<tr>
<td><input type=text ID="Text32" NAME="Text32" class="txt"></td>
</tr>
<tr>
<td><input type=text ID="Text33" NAME="Text33" class="txt"></td>
</tr>
<tr>
<td><input type=text ID="Text34" NAME="Text34" class="txt"></td>
</tr>
<tr>
<td><input type=text ID="Text35" NAME="Text35" class="txt"></td>
</tr>
<tr>
<td><input type=text ID="Text36" NAME="Text36" class="txt"></td>
</tr>
<tr>
<td><input type=text ID="Text37" NAME="Text37" class="txt"></td>
</tr>
<tr>
<td><input type=text ID="Text38" NAME="Text38" class="txt"></td>
</tr>
<tr>
<td><input type=text ID="Text39" NAME="Text39" class="txt"></td>
</tr>
<tr>
<td><input type=text ID="Text40" NAME="Text40" class="txt"></td>
</tr>
</table>
<div id="kb" style="position:absolute;top:100px;left:200px;">
<table>
<tr>
<td><input type=button ID="Button1" NAME="Button1" value="1" class="btn" onclick="numClick('1')"></td>
<td><input type=button ID="Button2" NAME="Button2" value="2" class="btn" onclick="numClick('2')"></td>
<td><input type=button ID="Button3" NAME="Button3" value="3" class="btn" onclick="numClick('3')"></td>
</tr>
<tr>
<td><input type=button ID="Button4" NAME="Button4" value="4" class="btn" onclick="numClick('4')"></td>
<td><input type=button ID="Button5" NAME="Button5" value="5" class="btn" onclick="numClick('5')"></td>
<td><input type=button ID="Button6" NAME="Button6" value="6" class="btn" onclick="numClick('6')"></td>
</tr>
<tr>
<td><input type=button ID="Button7" NAME="Button7" value="7" class="btn" onclick="numClick('7')"></td>
<td><input type=button ID="Button8" NAME="Button8" value="8" class="btn" onclick="numClick('8')"></td>
<td><input type=button ID="Button9" NAME="Button9" value="9" class="btn" onclick="numClick('9')"></td>
</tr>
<tr>
<td><input type=button ID="dot" NAME="dot" value="." class="btn" onclick="numClick('.')"></td>
<td><input type=button ID="Button0" NAME="Button0" value="0" class="btn" onclick="numClick('0')"></td>
<td><input type=button ID="enter" NAME="enter" value="Enter" class="btn" onclick="enterClick()"></td>
</tr>
</table>
</div>
</body>
<script language=javascript>
<!--
var iptNum, curid;
var kbleft, kbtop;

function init(){
txtNum=40;
curid=1;
document.all("Text"+curid).style.border="solid 1px #CC00CC";
kbleft = (document.body.clientWidth - kb.offsetWidth) / 2;
kbtop = (document.body.clientHeight - kb.offsetHeight) / 2;
kb.style.left = kbleft;
kb.style.top =  kbtop;
}

function numClick(num){
document.all("Text"+curid).value=document.all("Text"+curid).value + num;
}

function enterClick(){
if(curid<txtNum){
document.all("Text"+curid).style.border="solid 1px #999999";
curid++;
document.all("Text"+curid).style.border="solid 1px #CC00CC";
}else{
alert("已经到达底部！");
}
}

function window.onscroll(){
kb.style.left = kbleft + document.body.scrollLeft;
kb.style.top =  kbtop + document.body.scrollTop;
}
//-->
</script>
</html>

解决方案 »

  1.   

    看到你的代码，确实不错，但有个问题
    就是n个textbox输入完了，回车，光标下移到第n+1个textbox，如果此时发现上面有几个输错了，光标定位到上面，再用模拟小键盘输入数据时，数字只会出现在第n+1个textbox中，能不能象excel那样，光标定位后，再输入新的数据，把之前的覆盖掉，（不是光标定位就擦掉数据），你的紫色框也跟我的光标走可以做到么?
    谢谢
      

  2.   

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
    <html>
    <head>
    <title></title>
    <style type="text/css">
    input.btn{
    border:solid 1px #999999;
    width:36px;
    height:36px;
    }
    input.txt{
    border:solid 1px #999999;
    }
    </style>
    </head>
    <body onload="init()">
    <table border=0>
    <tr>
    <td><input type=text ID="Text1" NAME="TextIn" class="txt" onfocus="txtFocus(1)"></td>
    </tr>
    <tr>
    <td><input type=text ID="Text2" NAME="TextIn" class="txt" onfocus="txtFocus(2)"></td>
    </tr>
    <tr>
    <td><input type=text ID="Text3" Name="TextIn" class="txt" onfocus="txtFocus(3)"></td>
    </tr>
    <tr>
    <td><input type=text ID="Text4" Name="TextIn" class="txt" onfocus="txtFocus(4)"></td>
    </tr>
    <tr>
    <td><input type=text ID="Text5" Name="TextIn" class="txt" onfocus="txtFocus(5)"></td>
    </tr>
    <tr>
    <td><input type=text ID="Text6" Name="TextIn" class="txt" onfocus="txtFocus(6)"></td>
    </tr>
    <tr>
    <td><input type=text ID="Text7" Name="TextIn" class="txt" onfocus="txtFocus(7)"></td>
    </tr>
    <tr>
    <td><input type=text ID="Text8" Name="TextIn" class="txt" onfocus="txtFocus(8)"></td>
    </tr>
    <tr>
    <td><input type=text ID="Text9" Name="TextIn" class="txt" onfocus="txtFocus(9)"></td>
    </tr>
    <tr>
    <td><input type=text ID="Text10" Name="TextIn" class="txt" onfocus="txtFocus(10)"></td>
    </tr>
    <tr>
    <td><input type=text ID="Text11" Name="TextIn" class="txt" onfocus="txtFocus(11)"></td>
    </tr>
    <tr>
    <td><input type=text ID="Text12" Name="TextIn" class="txt" onfocus="txtFocus(12)"></td>
    </tr>
    <tr>
    <td><input type=text ID="Text13" Name="TextIn" class="txt" onfocus="txtFocus(13)"></td>
    </tr>
    <tr>
    <td><input type=text ID="Text14" Name="TextIn" class="txt" onfocus="txtFocus(14)"></td>
    </tr>
    <tr>
    <td><input type=text ID="Text15" Name="TextIn" class="txt" onfocus="txtFocus(15)"></td>
    </tr>
    <tr>
    <td><input type=text ID="Text16" Name="TextIn" class="txt" onfocus="txtFocus(16)"></td>
    </tr>
    <tr>
    <td><input type=text ID="Text17" Name="TextIn" class="txt" onfocus="txtFocus(17)"></td>
    </tr>
    <tr>
    <td><input type=text ID="Text18" Name="TextIn" class="txt" onfocus="txtFocus(18)"></td>
    </tr>
    <tr>
    <td><input type=text ID="Text19" Name="TextIn" class="txt" onfocus="txtFocus(19)"></td>
    </tr>
    <tr>
    <td><input type=text ID="Text20" Name="TextIn" class="txt" onfocus="txtFocus(20)"></td>
    </tr>
    <tr>
    <td><input type=text ID="Text21" Name="TextIn" class="txt" onfocus="txtFocus(21)"></td>
    </tr>
    <tr>
    <td><input type=text ID="Text22" Name="TextIn" class="txt" onfocus="txtFocus(22)"></td>
    </tr>
    <tr>
    <td><input type=text ID="Text23" Name="TextIn" class="txt" onfocus="txtFocus(23)"></td>
    </tr>
    <tr>
    <td><input type=text ID="Text24" Name="TextIn" class="txt" onfocus="txtFocus(24)"></td>
    </tr>
    <tr>
    <td><input type=text ID="Text25" Name="TextIn" class="txt" onfocus="txtFocus(25)"></td>
    </tr>
    <tr>
    <td><input type=text ID="Text26" Name="TextIn" class="txt" onfocus="txtFocus(26)"></td>
    </tr>
    <tr>
    <td><input type=text ID="Text27" Name="TextIn" class="txt" onfocus="txtFocus(27)"></td>
    </tr>
    <tr>
    <td><input type=text ID="Text28" Name="TextIn" class="txt" onfocus="txtFocus(28)"></td>
    </tr>
    <tr>
    <td><input type=text ID="Text29" Name="TextIn" class="txt" onfocus="txtFocus(29)"></td>
    </tr>
    <tr>
    <td><input type=text ID="Text30" Name="TextIn" class="txt" onfocus="txtFocus(30)"></td>
    </tr>
    <tr>
    <td><input type=text ID="Text31" Name="TextIn" class="txt" onfocus="txtFocus(31)"></td>
    </tr>
    <tr>
    <td><input type=text ID="Text32" Name="TextIn" class="txt" onfocus="txtFocus(32)"></td>
    </tr>
    <tr>
    <td><input type=text ID="Text33" Name="TextIn" class="txt" onfocus="txtFocus(33)"></td>
    </tr>
    <tr>
    <td><input type=text ID="Text34" Name="TextIn" class="txt" onfocus="txtFocus(34)"></td>
    </tr>
    <tr>
    <td><input type=text ID="Text35" Name="TextIn" class="txt" onfocus="txtFocus(35)"></td>
    </tr>
    <tr>
    <td><input type=text ID="Text36" Name="TextIn" class="txt" onfocus="txtFocus(36)"></td>
    </tr>
    <tr>
    <td><input type=text ID="Text37" Name="TextIn" class="txt" onfocus="txtFocus(37)"></td>
    </tr>
    <tr>
    <td><input type=text ID="Text38" Name="TextIn" class="txt" onfocus="txtFocus(38)"></td>
    </tr>
    <tr>
    <td><input type=text ID="Text39" Name="TextIn" class="txt" onfocus="txtFocus(39)"></td>
    </tr>
    <tr>
    <td><input type=text ID="Text40" Name="TextIn" class="txt" onfocus="txtFocus(40)"></td>
    </tr>
    </table>
    <div id="kb" style="position:absolute;top:100px;left:200px;">
    <table>
    <tr>
    <td><input type=button ID="Button1" NAME="Button1" value="1" class="btn" onclick="numClick(this.value)"></td>
    <td><input type=button ID="Button2" NAME="Button2" value="2" class="btn" onclick="numClick(this.value)"></td>
    <td><input type=button ID="Button3" NAME="Button3" value="3" class="btn" onclick="numClick(this.value)"></td>
    </tr>
    <tr>
    <td><input type=button ID="Button4" NAME="Button4" value="4" class="btn" onclick="numClick(this.value)"></td>
    <td><input type=button ID="Button5" NAME="Button5" value="5" class="btn" onclick="numClick(this.value)"></td>
    <td><input type=button ID="Button6" NAME="Button6" value="6" class="btn" onclick="numClick(this.value)"></td>
    </tr>
    <tr>
    <td><input type=button ID="Button7" NAME="Button7" value="7" class="btn" onclick="numClick(this.value)"></td>
    <td><input type=button ID="Button8" NAME="Button8" value="8" class="btn" onclick="numClick(this.value)"></td>
    <td><input type=button ID="Button9" NAME="Button9" value="9" class="btn" onclick="numClick(this.value)"></td>
    </tr>
    <tr>
    <td><input type=button ID="dot" NAME="dot" value="." class="btn" onclick="numClick(this.value)"></td>
    <td><input type=button ID="Button0" NAME="Button0" value="0" class="btn" onclick="numClick(this.value)"></td>
    <td><input type=button ID="enter" NAME="enter" value="Enter" class="btn" onclick="enterClick()"></td>
    </tr>
    </table>
    </div>
    </body>
    <script language=javascript>
    <!--
    var iptNum, curid;
    var kbleft, kbtop;

    function init(){
    txtNum=40;
    curid=1;
    document.getElementById("Text"+curid).style.border="solid 1px #CC00CC";
    kbleft = (document.body.clientWidth - kb.offsetWidth) / 2;
    kbtop = (document.body.clientHeight - kb.offsetHeight) / 2;
    kb.style.left = kbleft;
    kb.style.top =  kbtop;
    }

    function numClick(num){
    document.getElementById("Text"+curid).value=document.getElementById("Text"+curid).value + num;
    }

    function txtFocus(txtid){
    document.getElementById("Text"+curid).style.border="solid 1px #999999";
    curid=txtid;
    document.getElementById("Text"+curid).style.border="solid 1px #CC00CC";
    document.getElementById("Text"+curid).select();
    }

    function enterClick(){
    if(curid<txtNum){
    document.getElementById("Text"+curid).style.border="solid 1px #999999";
    curid++;
    document.getElementById("Text"+curid).style.border="solid 1px #CC00CC";
    }else{
    alert("已经到达底部！");
    }
    }

    function window.onscroll(){
    kb.style.left = kbleft + document.body.scrollLeft;
    kb.style.top =  kbtop + document.body.scrollTop;
    }
    //-->
    </script>
    </html>这个可以定位了，不过输入新的数据，还不能把以前的覆盖掉，需要自己删除，好像没有办法判断input里的字是否被选中，我再查一下看看吧
      

  3.   

    笔记本都是有小键盘的，只不过要用功能键切换====CSDN====
    人生起起伏伏凑字凑