Seleccionar el cuadro de texto en foco usando jQuery no funciona en los navegadores móviles

I have four text-boxes on a page with maxlength 4. My goal is that when a user fills the first text box the focus automatically moves to another text box. The method I wrote works fine in all web browsers but not in mobile browsers.

The markup I'm using:

<input tabindex="3" type="text" id="cnumber1" class="inputBx ccNumber" style="width:57px;margin-left: 11px!important" maxlength="4" size="4" autocomplete="off" />
        <input tabindex="4" type="text" id="cnumber2" class="ccNumber" style="width:57px;"  maxlength="4" size="4" autocomplete="off"/>
        <input tabindex="5" type="text" id="cnumber3" class="ccNumber" style="width:56px;"  maxlength="4" size="4" autocomplete="off"/>
        <input tabindex="6" type="text" id="cnumber4" class="ccNumber" style="width:56px;"  maxlength="4" size="4" autocomplete="off"/>

The Jquery method I'm using:

(function($) {
  $.switchFocus = function($this) {
    $this.unbind('keyup');
    $this.each(function() {
      $(this).keyup(function(){
        var $this = $(this),
        inputVal = $this.val(),
        iLen = inputVal.length,
        $nextEle = $this.next();
        if (iLen == $this.attr("size") && $nextEle.length > 0){
          if($nextEle.val().length === 0)
            $nextEle.focus();
        }
      });
    });
  }
}(jQuery));

Could I please get some help as to why this is happening with mobile browsers?

preguntado el 31 de julio de 12 a las 14:07

In which mobile browsers are you trying? -

@Ocanal I am using safari in iOS Simulator. -

1 Respuestas

It must be a bug for some mobile browsers, but this method should solve your problem, try it,

(function($) {
  $.switchFocus = function($this) {
    $this.unbind('keyup');
    $this.each(function() {
      $(this).keyup(function(){
        var $this = $(this),
        inputVal = $this.val(),
        iLen = inputVal.length,
        $nextEle = $this.next();
        if (iLen == $this.attr("size") && $nextEle.length > 0){
          if($nextEle.val().length === 0)
            $nextEle.focus();
            setTimeout(function(){$nextEle.focus()},0);
        }
      });
    });
  }
}(jQuery));

DEMO

Respondido 31 Jul 12, 14:07

No es la respuesta que estás buscando? Examinar otras preguntas etiquetadas or haz tu propia pregunta.