JS虚拟数字键盘问题

按钮点击后无法在下一个文本框输入信息都输入在上面的，哪个大哥帮忙看下！
就是有2个文本框，我用鼠标点击第一个文本框再点击按钮就输入相应的数字进这个文本框，点击下面一个文本框再点击数字也输入相应的数字到下一个文本！我现在点击数字只能输入字符到第一个文本框第二个没用！
源代码下载http://bbs.blueidea.com/thread-3060592-1-1.html<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>用户登录</title>
<script>
function ad(str)
{
  document.form1.p1.value = document.form1.p1.value + str;
}
</script>
<style>
/* CSS Document */
body{
margin-left: 0px;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;
  }h1, h2, h3, h4, h5, h6, p {
margin-top:0px;
padding-right:0px;
padding-left:0px;
}
#center{margin-left:auto; margin-right:auto}
ul,li{
list-style:none outside none;
margin:0;
padding:0;
}
#all{ width:1080px; height:750px; margin:0 auto; border:#003399 solid 1px; background:url(image/loginimg/4.jpg) no-repeat;}  
.in input{ width:218px; height:28px; line-height:28px; display:block; font-size:26px; background:#FFFFFF; border:#006666 1px solid; padding-left:5px; color:#0066FF;}
.info{background:url(image/loginimg/pics.jpg) no-repeat;}
.in{ width:451px; margin:0 auto; margin-top:220px;}.in .haoma{ width:451px; height:46px; margin-bottom:20px;}
.in .haoma li{ float:left; }
.in .haoma .k1{padding-top:6px; }
.in .haoma .k2{padding-top:10px; height:28px; line-height:28px; color:#006633; font-weight:bold;padding-left:66px;display:inline; }
.in .anniu{ height:55px; width:451px; text-align:center;}
.in .anniu li{ height:39px; width:65px; float:right; text-align:center; line-height:39px;display:block; margin:9px;_margin:4px 0 0 2px;margin-right:15px;}
.in .anniu img{ border:none;}
  .in .anniu li a{ color:#3399CC; font:"Verdana"; font-size:23px; font-weight:bolder; text-decoration:none; display:block; }
  .in .anniu li a:active{ height:39px; display:block; color:#F00; }
  .in .anniu image/loginimg{ border:none; }
 
.in .xia{ height:52px; width:451px; text-align:center;background:url(image/loginimg/111.jpg) no-repeat;}
.in .xia img{ border:none;}
  .in .xia li{ display:inline; margin:10px; width:45px; height:52px;color:#009999; }
  .in .xia a{ color:#336633; font-weight:bold;}
  .in .xia image/loginimg{ border:none; margin-top:5px;}
    
  .in .tool{ height:32px; width:228px; margin-left:12px;}
  .in .tool li{ float:left; display:inline; width:57px; text-align:center;}
  .in .tool image/loginimg{ border:none; cursor:pointer; }
  .in .tool a{ display:block; height:32px; width:57px; cursor:pointer;}
  .in .tool a:hover{ display:block;}
    
.in .top{ overflow:hidden; display:block; height:100px;}
  .in .top image/loginimg{ display:block; overflow:hidden;}
.in .buttom{ overflow:hidden; display:block; height:93px; color:#3399CC; color:#FFFFFF}
  in .buttom image/loginimg{ display:block; overflow:hidden;}
.left{ float:left;}
.rigth{ float:left;}
</style>
</head>
<body>
  <div id="all">   
  <div class="in">
  <ul class="haoma">
  <li class="k2">
  户号:&nbsp;
  </li>
  <li class="k1">
  <form method=post action="" name="form1"><input name="p1" type="text" /></form></li>
  <li></li>
  </ul>
  <ul class="haoma">
  <li class="k2">
  密码:&nbsp;
  </li>
  <li class="k1">
  <form method=post action="" name="form2"><input name="p1" type="password" /></form></li>
  <li></li>
  </ul>
  <div class="info">
<ul class="anniu">
  <li><a href="javascript:ad('5')"><image/loginimg src="image/loginimg/5.png" /></a></li>
  <li><a href="javascript:ad('4')"><image/loginimg src="image/loginimg/4.png" /></a></li>
  <li><a href="javascript:ad('3')"><image/loginimg src="image/loginimg/3.png" /></a></li>
  <li><a href="javascript:ad('2')"><image/loginimg src="image/loginimg/2.png" /></a></li>
  <li><a href="javascript:ad('1')"><image/loginimg src="image/loginimg/11.png" /></a></li>
  </ul>
    
<ul class="anniu">
  <li><a href="javascript:ad('0')"><image/loginimg src="image/loginimg/0.png" /></a></li>
  <li><a href="javascript:ad('6')"><image/loginimg src="image/loginimg/6.png" /></a></li>
  <li><a href="javascript:ad('7')"><image/loginimg src="image/loginimg/7.png" /></a></li>
  <li><a href="javascript:ad('8')"><image/loginimg src="image/loginimg/8.png" /></a></li>
  <li><a href="javascript:ad('9')"><image/loginimg src="image/loginimg/9.png" /></a></li>
  </ul>
    
<ul class="xia">
  <li><a href="index.html"><image/loginimg src="image/loginimg/button1.png" /></a></li>
  <li><a href="#" id="backbutton"><image/loginimg src="image/loginimg/button2.png" /></a></li>
  <li><a href="#" id="rows"><image/loginimg src="image/loginimg/button3.png" /></a></li>
  <li><a href="yongdian/user.htm"><image/loginimg src="image/loginimg/button4.png" /></a></li>
  </ul>
  </div>
  </div>
    
</div>  <script type="text/javascript">
  (function(){
  var back = document.getElementById('backbutton');
  back.onclick=function(){
  var numbers = document.form1.p1.value;
var len=numbers.length;
  document.form1.p1.value=numbers.slice(0,len-1);
return false;
  }
  })();
    
  (function(){
  var back = document.getElementById('rows');
  back.onclick=function(){
  var numbers = document.form1.p1.value;
var len=numbers.length;
  document.form1.p1.value=numbers.slice(0,len-100);
return false;
  }
  })();
  </script></body>
</html>

解决方案 »

  1.   

    function ad(str) {
            document.form1.p1.value = document.form1.p1.value + str;
            document.form2.p2.value = document.form2.p2.value + str;
        }
      

  2.   

    --LZ試下<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>用户登录</title>
    <script>
    var i=1;
    function ad(str)
    {
      eval("document.form"+i+".p1.value = document.form"+i+".p1.value + str");
    }
    </script>
    <style>
    /* CSS Document */
    body{
    margin-left: 0px;
    margin-top: 0px;
    margin-right: 0px;
    margin-bottom: 0px;
      }h1, h2, h3, h4, h5, h6, p {
    margin-top:0px;
    padding-right:0px;
    padding-left:0px;
    }
    #center{margin-left:auto; margin-right:auto}
    ul,li{
    list-style:none outside none;
    margin:0;
    padding:0;
    }
    #all{ width:1080px; height:750px; margin:0 auto; border:#003399 solid 1px; background:url(image/loginimg/4.jpg) no-repeat;}   
    .in input{ width:218px; height:28px; line-height:28px; display:block; font-size:26px; background:#FFFFFF; border:#006666 1px solid; padding-left:5px; color:#0066FF;}
    .info{background:url(image/loginimg/pics.jpg) no-repeat;}
    .in{ width:451px; margin:0 auto; margin-top:220px;}.in .haoma{ width:451px; height:46px; margin-bottom:20px;}
    .in .haoma li{ float:left; }
    .in .haoma .k1{padding-top:6px; }
    .in .haoma .k2{padding-top:10px; height:28px; line-height:28px; color:#006633; font-weight:bold;padding-left:66px;display:inline; }
    .in .anniu{ height:55px; width:451px; text-align:center;}
    .in .anniu li{ height:39px; width:65px; float:right; text-align:center; line-height:39px;display:block; margin:9px;_margin:4px 0 0 2px;margin-right:15px;}
    .in .anniu img{ border:none;}
      .in .anniu li a{ color:#3399CC; font:"Verdana"; font-size:23px; font-weight:bolder; text-decoration:none; display:block; }
      .in .anniu li a:active{ height:39px; display:block; color:#F00; }
      .in .anniu image/loginimg{ border:none; }
     
    .in .xia{ height:52px; width:451px; text-align:center;background:url(image/loginimg/111.jpg) no-repeat;}
    .in .xia img{ border:none;}
      .in .xia li{ display:inline; margin:10px; width:45px; height:52px;color:#009999; }
      .in .xia a{ color:#336633; font-weight:bold;}
      .in .xia image/loginimg{ border:none; margin-top:5px;}
        
      .in .tool{ height:32px; width:228px; margin-left:12px;}
      .in .tool li{ float:left; display:inline; width:57px; text-align:center;}
      .in .tool image/loginimg{ border:none; cursor:pointer; }
      .in .tool a{ display:block; height:32px; width:57px; cursor:pointer;}
      .in .tool a:hover{ display:block;}
        
    .in .top{ overflow:hidden; display:block; height:100px;}
      .in .top image/loginimg{ display:block; overflow:hidden;}
    .in .buttom{ overflow:hidden; display:block; height:93px; color:#3399CC; color:#FFFFFF}
      in .buttom image/loginimg{ display:block; overflow:hidden;}
    .left{ float:left;}
    .rigth{ float:left;}
    </style>
    </head>
    <body>
      <div id="all">   
      <div class="in">
      <ul class="haoma">
      <li class="k2">
      户号:&nbsp;
      </li>
      <li class="k1">
      <form method=post action="" name="form1"><input name="p1" type="text" onfocus="i=1;"/></form></li>
      <li></li>
      </ul>
      <ul class="haoma">
      <li class="k2">
      密码:&nbsp;
      </li>
      <li class="k1">
      <form method=post action="" name="form2"><input name="p1" type="password" onfocus="i=2;"/></form></li>
      <li></li>
      </ul>
      <div class="info">
    <ul class="anniu">
      <li><a href="javascript:ad('5')"><image/loginimg src="image/loginimg/5.png" /></a></li>
      <li><a href="javascript:ad('4')"><image/loginimg src="image/loginimg/4.png" /></a></li>
      <li><a href="javascript:ad('3')"><image/loginimg src="image/loginimg/3.png" /></a></li>
      <li><a href="javascript:ad('2')"><image/loginimg src="image/loginimg/2.png" /></a></li>
      <li><a href="javascript:ad('1')"><image/loginimg src="image/loginimg/11.png" /></a></li>
      </ul>
        
    <ul class="anniu">
      <li><a href="javascript:ad('0')"><image/loginimg src="image/loginimg/0.png" /></a></li>
      <li><a href="javascript:ad('6')"><image/loginimg src="image/loginimg/6.png" /></a></li>
      <li><a href="javascript:ad('7')"><image/loginimg src="image/loginimg/7.png" /></a></li>
      <li><a href="javascript:ad('8')"><image/loginimg src="image/loginimg/8.png" /></a></li>
      <li><a href="javascript:ad('9')"><image/loginimg src="image/loginimg/9.png" /></a></li>
      </ul>
        
    <ul class="xia">
      <li><a href="index.html"><image/loginimg src="image/loginimg/button1.png" /></a></li>
      <li><a href="#" id="backbutton"><image/loginimg src="image/loginimg/button2.png" /></a></li>
      <li><a href="#" id="rows"><image/loginimg src="image/loginimg/button3.png" /></a></li>
      <li><a href="yongdian/user.htm"><image/loginimg src="image/loginimg/button4.png" /></a></li>
      </ul>
      </div>
      </div>
        
    </div>  <script type="text/javascript">
      (function(){
      var back = document.getElementById('backbutton');
      back.onclick=function(){
      var numbers = document.form1.p1.value;
    var len=numbers.length;
      document.form1.p1.value=numbers.slice(0,len-1);
    return false;
      }
      })();
        
      (function(){
      var back = document.getElementById('rows');
      back.onclick=function(){
      var numbers = document.form2.p1.value;
    var len=numbers.length;
      document.form2.p1.value=numbers.slice(0,len-100);
    return false;
      }
      })();
      </script></body>
    </html>
      

  3.   

    谢谢zhangandli
    (人生无悔)
    这个能行了，不过能不能让其下面一排退格也起作用，谢谢啦！
      

  4.   


    //100改為1就可以了
     (function(){
      var back = document.getElementById('rows');
      back.onclick=function(){
      var numbers = document.form2.p1.value;
    var len=numbers.length;
      document.form2.p1.value=numbers.slice(0,len-1);
    return false;
      }
      })();
    調試下不就可以了，先用最笨的alert方法調試吧，網上去查下相關資料吧，上面的100改為1就可以了
      

  5.   

    那样是能实现，但是实现的是不同按钮的退格，不能实现1个按钮点击后退格另外个按钮点击不同行的全部删除,你说的那个只能分不同按钮把内容删除不能实现一个按钮啊。看哈这个代码哇谢谢！<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>用户登录</title>
    <script>
    var i=1;
    function ad(str)
    {
      eval("document.form"+i+".p1.value = document.form"+i+".p1.value + str");
    }
    </script>
    <style>
    /* CSS Document */
    body{
    margin-left: 0px;
    margin-top: 0px;
    margin-right: 0px;
    margin-bottom: 0px;
      }h1, h2, h3, h4, h5, h6, p {
    margin-top:0px;
    padding-right:0px;
    padding-left:0px;
    }
    #center{margin-left:auto; margin-right:auto}
    ul,li{
    list-style:none outside none;
    margin:0;
    padding:0;
    }
    #all{ width:1080px; height:750px; margin:0 auto; border:#003399 solid 1px; background:url(image/loginimg/4.jpg) no-repeat;}   
    .in input{ width:218px; height:28px; line-height:28px; display:block; font-size:26px; background:#FFFFFF; border:#006666 1px solid; padding-left:5px; color:#0066FF;}
    .info{background:url(image/loginimg/pics.jpg) no-repeat;}
    .in{ width:451px; margin:0 auto; margin-top:220px;}.in .haoma{ width:451px; height:46px; margin-bottom:20px;}
    .in .haoma li{ float:left; }
    .in .haoma .k1{padding-top:6px; }
    .in .haoma .k2{padding-top:10px; height:28px; line-height:28px; color:#006633; font-weight:bold;padding-left:66px;display:inline; }
    .in .anniu{ height:55px; width:451px; text-align:center;}
    .in .anniu li{ height:39px; width:65px; float:right; text-align:center; line-height:39px;display:block; margin:9px;_margin:4px 0 0 2px;margin-right:15px;}
    .in .anniu img{ border:none;}
      .in .anniu li a{ color:#3399CC; font:"Verdana"; font-size:23px; font-weight:bolder; text-decoration:none; display:block; }
      .in .anniu li a:active{ height:39px; display:block; color:#F00; }
      .in .anniu image/loginimg{ border:none; }
     
    .in .xia{ height:52px; width:451px; text-align:center;background:url(image/loginimg/111.jpg) no-repeat;}
    .in .xia img{ border:none;}
      .in .xia li{ display:inline; margin:10px; width:45px; height:52px;color:#009999; }
      .in .xia a{ color:#336633; font-weight:bold;}
      .in .xia image/loginimg{ border:none; margin-top:5px;}
        
      .in .tool{ height:32px; width:228px; margin-left:12px;}
      .in .tool li{ float:left; display:inline; width:57px; text-align:center;}
      .in .tool image/loginimg{ border:none; cursor:pointer; }
      .in .tool a{ display:block; height:32px; width:57px; cursor:pointer;}
      .in .tool a:hover{ display:block;}
        
    .in .top{ overflow:hidden; display:block; height:100px;}
      .in .top image/loginimg{ display:block; overflow:hidden;}
    .in .buttom{ overflow:hidden; display:block; height:93px; color:#3399CC; color:#FFFFFF}
      in .buttom image/loginimg{ display:block; overflow:hidden;}
    .left{ float:left;}
    .rigth{ float:left;}
    </style>
    </head>
    <body>
      <div id="all">   
      <div class="in">
      <ul class="haoma">
      <li class="k2">
      户号:&nbsp;
      </li>
      <li class="k1">
      <form method=post action="" name="form1"><input name="p1" type="text" onfocus="i=1;"/></form></li>
      <li></li>
      </ul>
      <ul class="haoma">
      <li class="k2">
      密码:&nbsp;
      </li>
      <li class="k1">
      <form method=post action="" name="form2"><input name="p1" type="password" onfocus="i=2;"/></form></li>
      <li></li>
      </ul>
      <div class="info">
    <ul class="anniu">
      <li><a href="javascript:ad('5')">5</a></li>
      <li><a href="javascript:ad('4')">4</a></li>
      <li><a href="javascript:ad('3')">3</a></li>
      <li><a href="javascript:ad('2')">2</a></li>
      <li><a href="javascript:ad('1')">1</a></li>
      </ul>
        
    <ul class="anniu">
      <li><a href="javascript:ad('0')">0</a></li>
      <li><a href="javascript:ad('6')">6</a></li>
      <li><a href="javascript:ad('7')">7</a></li>
      <li><a href="javascript:ad('8')">8</a></li>
      <li><a href="javascript:ad('9')">9</a></li>
      </ul>
        
    <ul class="xia">
      <li><a href="index.html">退出</a></li>
      <li><a href="#" id="backbutton">退格</a></li>
      <li><a href="#" id="rows">重查</a></li>
      <li><a href="yongdian/user.htm">确认</a></li>
      </ul>
      </div>
      </div>
        
    </div>  <script type="text/javascript">
      (function(){
      var back = document.getElementById('backbutton');
      back.onclick=function(){
      var numbers = document.form1.p1.value;
      var len=numbers.length;
      document.form1.p1.value=numbers.slice(0,len-1);
    return false;
      }
      })();
        
      (function(){
      var back = document.getElementById('rows');
      back.onclick=function(){
      var numbers = document.form1.p1.value;
    var len=numbers.length;
      document.form1.p1.value=numbers.slice(0,len-100);
    return false;
      }
      })();
      </script></body>
    </html>
      

  6.   

    主要是不能实现点击其中一个文本框输入数据后再点退格，还是退的上面行的，重查也是这样的，不能满足2个框共用，这个真不是很懂唉，再请教下大哥！以下是代码！
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>用户登录</title>
    <script>
    var i=1;
    function ad(str)
    {
      eval("document.form"+i+".p1.value = document.form"+i+".p1.value + str");
    }
    </script>
    <style>
    /* CSS Document */
    body{
    margin-left: 0px;
    margin-top: 0px;
    margin-right: 0px;
    margin-bottom: 0px;
      }h1, h2, h3, h4, h5, h6, p {
    margin-top:0px;
    padding-right:0px;
    padding-left:0px;
    }
    #center{margin-left:auto; margin-right:auto}
    ul,li{
    list-style:none outside none;
    margin:0;
    padding:0;
    }
    #all{ width:1080px; height:750px; margin:0 auto; border:#003399 solid 1px; background:url(image/loginimg/4.jpg) no-repeat;}   
    .in input{ width:218px; height:28px; line-height:28px; display:block; font-size:26px; background:#FFFFFF; border:#006666 1px solid; padding-left:5px; color:#0066FF;}
    .info{background:url(image/loginimg/pics.jpg) no-repeat;}
    .in{ width:451px; margin:0 auto; margin-top:220px;}.in .haoma{ width:451px; height:46px; margin-bottom:20px;}
    .in .haoma li{ float:left; }
    .in .haoma .k1{padding-top:6px; }
    .in .haoma .k2{padding-top:10px; height:28px; line-height:28px; color:#006633; font-weight:bold;padding-left:66px;display:inline; }
    .in .anniu{ height:55px; width:451px; text-align:center;}
    .in .anniu li{ height:39px; width:65px; float:right; text-align:center; line-height:39px;display:block; margin:9px;_margin:4px 0 0 2px;margin-right:15px;}
    .in .anniu img{ border:none;}
      .in .anniu li a{ color:#3399CC; font:"Verdana"; font-size:23px; font-weight:bolder; text-decoration:none; display:block; }
      .in .anniu li a:active{ height:39px; display:block; color:#F00; }
      .in .anniu image/loginimg{ border:none; }
     
    .in .xia{ height:52px; width:451px; text-align:center;background:url(image/loginimg/111.jpg) no-repeat;}
    .in .xia img{ border:none;}
      .in .xia li{ display:inline; margin:10px; width:45px; height:52px;color:#009999; }
      .in .xia a{ color:#336633; font-weight:bold;}
      .in .xia image/loginimg{ border:none; margin-top:5px;}
        
      .in .tool{ height:32px; width:228px; margin-left:12px;}
      .in .tool li{ float:left; display:inline; width:57px; text-align:center;}
      .in .tool image/loginimg{ border:none; cursor:pointer; }
      .in .tool a{ display:block; height:32px; width:57px; cursor:pointer;}
      .in .tool a:hover{ display:block;}
        
    .in .top{ overflow:hidden; display:block; height:100px;}
      .in .top image/loginimg{ display:block; overflow:hidden;}
    .in .buttom{ overflow:hidden; display:block; height:93px; color:#3399CC; color:#FFFFFF}
      in .buttom image/loginimg{ display:block; overflow:hidden;}
    .left{ float:left;}
    .rigth{ float:left;}
    </style>
    </head>
    <body>
      <div id="all">   
      <div class="in">
      <ul class="haoma">
      <li class="k2">
      户号:&nbsp;
      </li>
      <li class="k1">
      <form method=post action="" name="form1"><input name="p1" type="text" onfocus="i=1;"/></form></li>
      <li></li>
      </ul>
      <ul class="haoma">
      <li class="k2">
      密码:&nbsp;
      </li>
      <li class="k1">
      <form method=post action="" name="form2"><input name="p1" type="password" onfocus="i=2;"/></form></li>
      <li></li>
      </ul>
      <div class="info">
    <ul class="anniu">
      <li><a href="javascript:ad('5')">5</a></li>
      <li><a href="javascript:ad('4')">4</a></li>
      <li><a href="javascript:ad('3')">3</a></li>
      <li><a href="javascript:ad('2')">2</a></li>
      <li><a href="javascript:ad('1')">1</a></li>
      </ul>
        
    <ul class="anniu">
      <li><a href="javascript:ad('0')">0</a></li>
      <li><a href="javascript:ad('6')">6</a></li>
      <li><a href="javascript:ad('7')">7</a></li>
      <li><a href="javascript:ad('8')">8</a></li>
      <li><a href="javascript:ad('9')">9</a></li>
      </ul>
        
    <ul class="xia">
      <li><a href="index.html">退出</a></li>
      <li><a href="#" id="backbutton">退格</a></li>
      <li><a href="#" id="rows">重查</a></li>
      <li><a href="yongdian/user.htm">确认</a></li>
      </ul>
      </div>
      </div>
        
    </div>  <script type="text/javascript">
      (function(){
      var back = document.getElementById('backbutton');
      back.onclick=function(){
      var numbers = document.form1.p1.value;
      var len=numbers.length;
      document.form1.p1.value=numbers.slice(0,len-1);
    return false;
      }
      })();
        
      (function(){
      var back = document.getElementById('rows');
      back.onclick=function(){
      var numbers = document.form1.p1.value;
    var len=numbers.length;
      document.form1.p1.value=numbers.slice(0,len-100);
    return false;
      }
      })();
      </script></body>
    </html>