que - Mobile Safari: el método Javascript focus() en el campo de entrada solo funciona con click?

focus() javascript

Question

Parece que no puedo encontrar una solución para este problema.

Tengo un campo de entrada simple como este.

<div class="search">
   <input type="text" value="y u no work"/>
</div>​

Y estoy tratando de focus() dentro de una función. Entonces, dentro de una función aleatoria (no importa qué función sea), tengo esta línea ...

$(''.search'').find(''input'').focus();

Esto funciona bien en todos los equipos de escritorio que sea.

Sin embargo, no funciona en mi iPhone. El campo no se está enfocando y el teclado no se muestra en mi iPhone.

Para fines de prueba y para mostrarles el problema, hice una muestra rápida:

$(''#some-test-element'').click(function() {
  $(''.search'').find(''input'').focus(); // works well on my iPhone - Keyboard slides in
});

setTimeout(function() {
  //alert(''test''); //works
  $(''.search'').find(''input'').focus(); // doesn''t work on my iPhone - works on Desktop
}, 5000);​

Alguna idea de por qué el focus() no funcionaría con la función de tiempo de espera en mi iPhone.

Para ver el ejemplo en vivo, prueba este violín en tu iPhone. http://jsfiddle.net/Hc4sT/

Actualizar:

Creé exactamente el mismo caso que estoy enfrentando actualmente en mi proyecto actual.

Tengo un cuadro de selección que debería - cuando se "modificó" - establecer el foco en el campo de entrada y deslizar en el kexboard en el iphone u otros dispositivos móviles. Descubrí que el foco () está configurado correctamente pero el teclado no aparece. Necesito que aparezca el teclado.

Cargué los archivos de prueba aquí http://cl.ly/1d210x1W3Y3W ... Si prueba esto en el iPhone, verá que el teclado no se desliza.

Answer 1

En realidad, muchachos, hay una manera. Luché poderosamente para resolver esto en http://forstartersapp.com (pruébalo en un iPhone o iPad).

Básicamente, Safari en dispositivos con pantalla táctil es tacaño cuando se trata de focus() en cuadros de texto. Incluso algunos navegadores de escritorio funcionan mejor si haces click().focus() . Pero los diseñadores de Safari en dispositivos con pantalla táctil se dieron cuenta de que es molesto para los usuarios cuando el teclado sigue apareciendo, por lo que hicieron que el foco solo apareciera en las siguientes condiciones:

1) El usuario hizo clic en algún lugar y se invocó focus() al ejecutar el evento click. Si está haciendo una llamada AJAX, debe hacerlo de forma síncrona, como con la opción $.ajax({async:false}) obsoleta (pero aún disponible) en jQuery.

2) Además, y este me mantuvo ocupado por un tiempo, focus() aún no parece funcionar si algún otro cuadro de texto está enfocado en ese momento. Tenía un botón "Ir" que hacía AJAX, así que traté de desenfocar el cuadro de texto en el evento de touchstart del botón Ir, pero eso solo hizo que el teclado desapareciera y movió la ventana gráfica antes de que tuviera la oportunidad de completar el clic en Ir botón. Finalmente probé difuminar el cuadro de texto en el evento touchend del botón Ir, ¡y funcionó como un amuleto!

Cuando junta los números 1 y 2, obtiene un resultado mágico que diferenciará sus formularios de inicio de sesión de todos los formularios de inicio de sesión web, colocando el foco en sus campos de contraseña y haciéndolos sentir más nativos. ¡Disfrutar! :)

Answer 2

Esta solución funciona bien, probé en mi teléfono:

document.body.ontouchend = function() { document.querySelector(''[name="name"]'').focus(); };

disfrutar

Answer 3

Intente utilizar el evento on-tap en lugar de ng-click. Tuve este problema Lo resolví haciendo que mi botón de búsqueda clara dentro de la etiqueta del formulario de búsqueda y reemplazado ng-clic de borrar-botón por toque. Funciona bien ahora.

Answer 4

Me enfrenté al mismo problema recientemente. Encontré una solución que aparentemente funciona para todos los dispositivos. No puede hacer un enfoque asincrático mediante programación, pero puede cambiar el enfoque a su entrada de destino cuando ya hay otra entrada enfocada. Entonces, lo que necesita hacer es crear, ocultar, agregar a DOM y enfocar una entrada falsa en el evento desencadenante y, cuando se complete la acción asincrónica, simplemente vuelva a llamar al foco en la entrada de destino. Aquí hay un fragmento de ejemplo: ejecútelo en su dispositivo móvil.

editar:

Aquí hay un violín con el mismo código . Aparentemente no puedes ejecutar fragmentos adjuntos en móviles (o estoy haciendo algo mal).

var $triggerCheckbox = $("#trigger-checkbox");
var $targetInput = $("#target-input");

// Create fake & invisible input
var $fakeInput = $("<input type=''text'' />")
  .css({
    position: "absolute",
    width: $targetInput.outerWidth(), // zoom properly (iOS)
    height: 0, // hide cursor (font-size: 0 will zoom to quarks level) (iOS)
    opacity: 0, // make input transparent :]
  });

var delay = 2000; // That''s crazy long, but good as an example

$triggerCheckbox.on("change", function(event) {
  // Disable input when unchecking trigger checkbox (presentational purpose)
  if (!event.target.checked) {
    return $targetInput
      .attr("disabled", true)
      .attr("placeholder", "I''m disabled");
  }

  // Prepend to target input container and focus fake input
  $fakeInput.prependTo("#container").focus();

  // Update placeholder (presentational purpose)
  $targetInput.attr("placeholder", "Wait for it...");

  // setTimeout, fetch or any async action will work
  setTimeout(function() {

    // Shift focus to target input
    $targetInput
      .attr("disabled", false)
      .attr("placeholder", "I''m alive!")
      .focus();

    // Remove fake input - no need to keep it in DOM
    $fakeInput.remove();
  }, delay);
});

label {
  display: block;
  margin-top: 20px;
}

input {
  box-sizing: border-box;
  font-size: inherit;
}

#container {
  position: relative;
}

#target-input {
  width: 250px;
  padding: 10px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div id="container">
  <input type="text" id="target-input" placeholder="I''m disabled" />

  <label>
    <input type="checkbox" id="trigger-checkbox" />
    focus with setTimetout
   </label>
</div>

Answer 5

Pude hacer que funcione con el siguiente código:

event.preventDefault();
timeout(function () {
    $inputToFocus.focus();
}, 500);

Estoy usando AngularJS así que he creado una directiva que resolvió mi problema:

Directiva:

angular.module(''directivesModule'').directive(''focusOnClear'', [
    ''$timeout'',
    function (timeout) {
        return {
            restrict: ''A'',
            link: function (scope, element, attrs) {
                var id = attrs.focusOnClear;
                var $inputSearchElement = $(element).parent().find(''#'' + id);
                element.on(''click'', function (event) {
                    event.preventDefault();
                    timeout(function () {
                        $inputSearchElement.focus();
                    }, 500);
                });
            }
        };
    }
]);

Cómo usar la directiva:

<div>
    <input type="search" id="search">
    <i class="icon-clear" ng-click="clearSearchTerm()" focus-on-clear="search"></i>
</div>

Parece que está utilizando jQuery, por lo que no sé si la directiva es de alguna ayuda.

Answer 6

Tengo un formulario de búsqueda con un ícono que borra el texto al hacer clic. Sin embargo, el problema (en dispositivos móviles y tabletas) era que el teclado colapsaría / se ocultaría, ya que el evento de click eliminado se eliminó de la input .

Objetivo : después de borrar el formulario de búsqueda (hacer clic / tocar en el icono x), ¡ mantenga el teclado visible !

Para lograr esto, aplique stopPropagation() en el evento de la siguiente manera:

function clear ($event) {
    $event.preventDefault();
    $event.stopPropagation();
    self.query = '''';
    $timeout(function () {
        document.getElementById(''sidebar-search'').focus();
    }, 1);
}

Y el formulario HTML:

<form ng-controller="SearchController as search"
    ng-submit="search.submit($event)">
        <input type="search" id="sidebar-search" 
            ng-model="search.query">
                <span class="glyphicon glyphicon-remove-circle"
                    ng-click="search.clear($event)">
                </span>
</form>

Answer 7

ACTUALIZAR

También probé esto, pero fue en vano:

$(document).ready(function() {
$(''body :not(.wr-dropdown)'').bind("click", function(e) {
    $(''.test'').focus();
})
$(''.wr-dropdown'').on(''change'', function(e) {
    if ($(".wr-dropdow option[value=''/search'']")) {
        setTimeout(function(e) {
            $(''body :not(.wr-dropdown)'').trigger("click");
        },3000)         
    } 
}); 

});

Estoy confundido sobre por qué dices que esto no está funcionando porque tu JSFiddle está funcionando bien, pero esta es mi sugerencia de todos modos ...

Pruebe esta línea de código en su función SetTimeOut en su evento de clic:

document.myInput.focus();

myInput se correlaciona con el atributo de nombre de la etiqueta de entrada.

<input name="myInput">

Y usa este código para difuminar el campo:

document.activeElement.blur();