jQuery制作软键盘碰到的郁闷事

Question

最近做的一个项目,在登陆的时候要用到软键盘,我JS学得很烂,碰到比较复杂的JS我就用jq,但这次碰到的问题很郁闷,已经做了一天多了都没想到解决办法,无奈,只有上这里来请教各位高人了
我先说下大致情况,有两个输入框:user和pwd,当点击任一输入框时,都弹出键盘,而且这个键盘是同一个键盘.主要HTML代码如下:<form>
<table>
<tr>
<td>用户名</td>
<td><input type="text" id="user" onfocus="textFocus('#user');"/></td>
</tr>
<tr>
<td>密码</td>
<td><input type="password" id="pwd" onfocus="textFocus('#pwd');"/></td>
</tr>
<tr>
<td><input type="submit" value="提交" /></td>
<td><input type="reset" value="重置"/></td>
</tr>
</table>
</form>以下是键盘的代码:<div id="keys" style="position:absolute; width:284px;height:145px; background:#fff url(images/bg.png) no-repeat;display:none; left:0;top:0;">
  <div id="title" style="height:24px; padding-top:4px;">
  <span style="color:#f00; font-size:12px; float:left;"> &nbsp; &nbsp; &nbsp;*点击按键即可输入</span>   <a href="javascript:" id="close" onclick="$('#keys').hide();" style="float:right; margin-right:14px;"></a>
  </div>
<a href="javascript:">1</a><a href="javascript:">2</a><a href="javascript:">3</a><a href="javascript:">4</a><a href="javascript:">5</a><a href="javascript:">6</a><a href="javascript:">7</a><a href="javascript:">8</a><a href="javascript:">9</a><a href="javascript:">0</a><br/>
<a href="javascript:">Q</a><a href="javascript:">W</a><a href="javascript:">E</a><a href="javascript:">R</a><a href="javascript:">T</a><a href="javascript:">Y</a><a href="javascript:">U</a><a href="javascript:">I</a><a href="javascript:">O</a><a href="javascript:">P</a><BR/>
<a href="javascript:">A</a><a href="javascript:">S</a><a href="javascript:">D</a><a href="javascript:">F</a><a href="javascript:">G</a><a href="javascript:">H</a><a href="javascript:">J</a><a href="javascript:">K</a><a href="javascript:">L</a><BR/>
<a href="javascript:">Z</a><a href="javascript:">X</a><a href="javascript:">C</a><a href="javascript:">V</a><a href="javascript:">B</a><a href="javascript:">N</a><a href="javascript:">M</a><input type="button" value="确定" onclick="$('#keys').hide();"/>
</div>以下是主要的jQuery代码:function textFocus(id){
alert(id);
var $keys = $("#keys");
$keys.show();
var lt = $(id).offset().left;
var tp =$(id).offset().top;
$keys.css({left: lt + 130 +"px", top: tp + 18 +"px" });
$("#keys a").not("#close").click(
function (id){
alert(id);
$(id).val($(id).val() + $(this).text());
//alert($(id).val());
}
)
//input(id);
id = "";
}function input(id){
$("#keys a").not("#close").click(
function (){
//alert(id);
$(id).val($(id).val() + $(this).text());
//alert($(id).val());
}
)
}我碰到的郁闷的事就是,在载入页面后,我点user,再点击键盘上的按键,可以输入,但我再点pwd,然后再点键盘上的按键,他就会在user和pwd中同时插入我点的这个值,然后再回头继续点user,他就会在user里插入两个值,并在pwd插入一个值....简单的说,就是这个ID被传了一次又一次,点几次输入框他就传几次.....我无语了,我用了其他好多种方法,都不能将它们分开.折腾了一天再加半天了...也许是我的思路不对,出发点错误了.希望牛人们给以些许指导啊...跪求中.在线等 

Answer 1

给个思路，点出软键盘的时候用遮罩层遮掉其他input, 
然后软键盘用完，把该清的变量清掉。

Answer 2

var flag="";//~~~
function textFocus(id){
    alert(id);
if(!id.equals(flag)){  //~~~
    $(id).val(""); }   //~~~
flag=id;               //~~~
    var $keys = $("#keys");
    $keys.show();
    var lt = $(id).offset().left;
    var tp =$(id).offset().top;
    $keys.css({left: lt + 130 +"px", top: tp + 18 +"px" });
    $("#keys a").not("#close").click(
        function (id){
            alert(id);
            $(id).val($(id).val() + $(this).text());
            //alert($(id).val());
        }
    )
    //input(id);
    id = "";
}function input(){
    $("#keys a").not("#close").click(
        function (){
            $(flag).val($(flag).val() + $(flag).text());//~~~
        }
    )
}
没测试过，大概这个思路

Answer 3

上面的按ID取元素，漏了#
$("#"+id)

Answer 4

我调用这个函数时,是这样调的 onfocus="textFocus('#user');"/>

Answer 5

看了下，你input()在哪调用了?!
改了下你的代码          var _id ;
         function textFocus(id){
             _id = id;
             var $keys = $("#keys");
             $keys.show();
             var lt = $(id).offset().left;
             var tp =$(id).offset().top;
             $keys.css({left: lt + 130, top: tp + 18 });
             $("#keys a").not("#close").click(
                 function (id){
                    
                     $(id).val($(id).val() + $(this).text());
                     //alert($(id).val());
                 }
             )
         }
        $(function(){
             $("#keys a").not("#close").click(function(){
                    if(_id){
                       $(_id).val($(_id).val()+$(this).text());
                    }
                }
             );
        }) ;

Answer 6

很抱歉,代码帖错了,当时我正在改,想把input里的东西移到上面的函数 里去...
我试了下你的方法,好像是对的呢,等我测试一下