jQuery Mobile将重点放在按键上的下一个输入 [英] jQuery Mobile focus next input on keypress

问题描述

我有一个jQuery的移动网站，由4个输入框输入框组成的html表单。我希望用户能够在每个输入字段中输入一个引脚，而不必按下iphone键盘上的下一步按钮。我已经尝试了以下步骤，虽然它似乎将焦点设置到第二个输入并插入值，键盘消失，所以用户仍然必须通过轻敲事件激活所需的输入。

$ b $（$＃$ $ $ $ $'$ t $ p $'$>
$（＃txtPin1）。val（$（＃txtPin1）。val（））;
}）;
$（＃txtPin2）。
$（＃txtPin2）。val（'pin2'）;
}）;

是否有一个不同的事件，我应该分配给$（＃txtPin2）？ p>

我试着实现 http://jqueryminute.com/set-focus-to-the-next-input-field-with-jquery/ 这也是，但我发现它适用于android而不是iphone。

任何帮助都不胜感激。 解决方案

有用。我无法在iPhone上查看它。
选中此项： http://jsfiddle.net/Q3Ap8/276/ [直接链接： http://fiddle.jshell.net/Q3Ap8/276/show/ ]

  $（'。txtPin'）。keydown（function（）{
 that = this; 
 setTimeout（function（）{
 var value = $（that）.val（）; $ b $ if（value.length> 3）{
 $（that）.next（）。next （）.next（）。focus（）。tap（）; 
} 
}，0）; 
}）; 
  

另一个适用于android的解决方案是：
http://jsfiddle.net/Q3Ap8/277/ [ http://jsfiddle.net/Q3Ap8/277/show ]

  $ （'.txtPin'）。keydown（function（）{
 that = this; 
 setTimeout（function（）{
 var value = $（that）.val（）; $ b $ （value.length> 3）{
 $（that）.next（）。next（）。next（）。click（）; 
} 
}，0）; 
}）; 
 $（'。txtPin'）。click（function（）{
 $（this）.focus（）。tap（）; 
}）; 
  

I have a jquery mobile site with a html form consisting of 4 pin entry input boxes. I want the user to be able to enter a pin in each input field without having to press the iphone keyboards "next" button. I have tried the following and although it appears to set the focus to the second input and insert the value, the keyboard disappears so the user still has to activate the required input with a tap event.

$('#txtPin1').keypress(function() {
        $('#txtPin1').bind('change', function(){  
            $("#txtPin1").val($("#txtPin1").val()); 
        });
        $("#txtPin2").focus();
        $("#txtPin2").val('pin2');
});

Is there a different event that I should be assigning to $("#txtPin2")?

I have tried to implement http://jqueryminute.com/set-focus-to-the-next-input-field-with-jquery/ this also, but I found that it worked for android and not for iphone.

Any help is greatly appreciate it.

解决方案

I tried it on android and it works. I can not check it on iPhone. Check this: http://jsfiddle.net/Q3Ap8/276/ [direct link: http://fiddle.jshell.net/Q3Ap8/276/show/ ]

$('.txtPin').keydown(function() {
    that=this;
    setTimeout(function(){
        var value = $(that).val();
        if(value.length > 3) {
        $(that).next().next().next().focus().tap();
        }
     },0);
});

Other solution that works for android is: http://jsfiddle.net/Q3Ap8/277/ [ http://jsfiddle.net/Q3Ap8/277/show ]

$('.txtPin').keydown(function() {
    that=this;
    setTimeout(function(){
        var value = $(that).val();
        if(value.length > 3) {
        $(that).next().next().next().click();
        }
     },0);
});
$('.txtPin').click(function() {
   $(this).focus().tap();
});

这篇关于jQuery Mobile将重点放在按键上的下一个输入的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！