Me parece que no puede encontrar una solución para este problema.

Tengo un simple campo de entrada como esta.

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

Y estoy tratando de focus() dentro de una función.
Así que dentro de una función aleatoria (no importa lo que la función es) tengo esta línea …

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

Esto funciona muy bien en todos los escritorios que sea.

Sin embargo no funciona en mi iPhone. El campo no es enfocarse y el teclado no se muestra en mi iPhone.

Para propósitos de prueba y mostrar a ustedes el problema que se me hizo un rápido ejemplo:

$('#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 funciona 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/

Actualización:

He creado exactamente el mismo caso como estoy enfrentando actualmente en mi proyecto actual.

Tengo un select-cuadro que debe — cuando «cambiado» — establece el foco en el campo de entrada y deslice en el kexboard en el iphone u otros dispositivos móviles. Me enteré de que el focus() está configurado correctamente, pero el teclado no se muestra. Necesito el teclado para mostrar.

He subido el testfiles aquí http://cl.ly/1d210x1W3Y3W … Si usted prueba esta en el iphone se puede ver que el teclado no deslizante.

  • tal vez es la concentración, pero el teclado no se muestra (que es el caso en mi Nokia X6).
  • a mí me funciona. jsfiddle pega solo se centra la caja y se abre un teclado en mi iphone. que iOS está utilizando? He comprobado con 5.1.
  • Las obras de los nuevos iPad también
  • Ok, tienes razón como parece. Estoy en iOS 5.1.1. El focus() parece funcionar como sé conjunto input:focus { background:green; } a través de la css en la entrada. Sin embargo, el teclado no se deslice y para mí. Vea este caso de trabajo actualmente estoy trabajando en. cl.ly/1d210x1W3Y3W esta Prueba en tu iPhone. Cualquier posibilidad de que se deslice en el teclado cuando elija «Search» en el que seleccionar el cuadro?
  • Está usted seguro de que se abre el Teclado en tu iPhone? He leído un montón de cosas que ahora y todo el mundo dice que no es posible mostrar el teclado en forma programática.
  • Podría publicar el código para la actualización. Descargar un zip y de alguna manera llegar a una posición donde la puedo probar en mi teléfono es un poco de un dolor 😉
  • Seguro, consulte este … bit.ly/ONzR1w … traté y traté y traté, pero parece que no puede deslice el teclado. Tal vez puedas encontrar alguna forma o truco para hacerlo. También traté de trigger() un clic o un «tap» en otro elemento para establecer el foco -, pero ninguna posibilidad. De nuevo, el foco se establece, pero el teclado no está deslizando hacia arriba.
  • Estoy tratando un montón de cosas. Traté de triggerHandler(), focusin(), trigger(«focus»). Incluso intenté desenfoque primero y, a continuación, vuelva a agregar el foco. Yo creo que puede ser un error en webkit. Usted podría estar fuera de suerte con este…Pero voy a probar un par de cosas más…
  • He leído que es más como una característica que no es un error en mobile safari. Yo realmente no lo entiendo la razón de por qué, pero me he tropezado con un buen par de posts al respecto.
  • He encontrado esto, y un par de artículos sobre este asunto. Yo creo que lo que están tratando de hacer es imposible en la actualidad. groups.google.com/forum/?fromgroups=#!tema/jqtouch/-uhJqVsqX_M
  • Sabes por casualidad que el valor ASCII el botón «Hecho» equivale a? Hace es actuar como un 13? (similar a la tecla Entrar)? Tratando de asignar una función al presionar el botón «Hecho» para ver si hace algo…
  • Traté de $(document).keypress(function(e) { alert(); }); Pero la alerta no de fuego para el botón «Hecho». No se debe tratar como una pulsación de tecla.
  • Sí, eso es lo que yo pensaba.
  • Estoy dando para arriba. He probado de todo. No es algo que usted puede hacer en iOS navegador Web Safari. Esperemos que Apple hace un cambio para permitir esto porque yo ciertamente no consideran que esto es una «característica»! jaja no sé por qué, usted puede fácilmente blur() en el campo, pero no se puede establecer el foco a la misma. No tiene sentido para mí.
  • Gracias por tratar. Ya me di por vencido demasiado.
  • Se dan cuenta de que PUEDE establecer el foco en el campo y que aparezca el teclado haciendo clic en otro elemento de la página. Que es fácil. Pero por alguna razón, el salto desde la lista desplegable, seleccione la rueda para el teclado parece ser el culpable. Es como el iPhone no permite la espalda de entrada de las pantallas sin que el usuario intervenga en el primer lugar…
  • FWIW, estoy usando el WP7 y no podía abrir el teclado, a menos que la entrada era visible; yo no tenía necesariamente que le toque. Cuando la entrada se oculta a través de la pantalla:ninguna, no podía abrir el teclado.
  • duplicado: stackoverflow.com/questions/6287478/…

InformationsquelleAutor matt | 2012-08-30

8 Comentarios

  1. 69

    Realidad, chicos, hay un camino. Me costó muchísimo a esta figura para http://forstartersapp.com (probar en un iPhone o iPad).

    Básicamente, Safari en dispositivos con pantalla táctil es tacaño cuando se trata de focus()ing cuadros de texto. Incluso algunos de los navegadores de escritorio hacer mejor si se click().focus(). Pero los diseñadores de Safari en dispositivos con pantalla táctil di cuenta de que es molesto para los usuarios cuando el teclado sigue saliendo, por lo que hizo el foco sólo aparecen en las siguientes condiciones:

    1) El usuario ha hecho clic en algún lugar y focus() fue llamado al ejecutar el evento click. Si usted está haciendo una llamada AJAX, entonces usted debe hacerlo de forma sincrónica, como con el obsoleto (pero todavía disponible) $.ajax({async:false}) opción en jQuery.

    2) por otra parte-y este me mantuvo ocupado durante un tiempo — focus() todavía no parece funcionar si algún otro cuadro de texto se centra en el tiempo. Yo tenía un botón de «Ir» que hizo el AJAX, así que he intentado opacar el cuadro de texto en el touchstart caso de que el botón Ir, pero eso solo hizo que el teclado desaparece y se trasladó a la ventanilla antes de que tuviera una oportunidad para completar la haga clic en el botón Ir. Por último he intentado opacar el cuadro de texto en el touchend caso de que el botón Ir, y esto funcionó como un encanto!

    Al puesto #1 y #2 en conjunto, se obtiene un resultado mágico que establecerá sus formularios de inicio de sesión, aparte de toda la mierda de web de formularios de inicio de sesión, poniendo el foco en los campos de contraseña, y hacer que se sientan más nativo. ¡A disfrutar! 🙂

    • con respecto a #1, ¿cómo hacerlo de forma sincrónica a partir de un evento de teclado?
    • Esto suena muy inteligente, pero estoy teniendo un tiempo difícil «poner #1 y #2 juntos». En mi aplicación, con jQueryMobile, cuando un usuario hace clic en un elemento de lista en Una página, una nueva página B abre, que tiene un solo visibles de entrada. Quiero el teclado para abrir automáticamente para esa entrada. ¿Quiere decir que tengo que poner el .focus() llamada en algún lugar en el controlador de clic en la página a?
    • No sé si esto todavía está trabajando, ¿no? He pulsado el botón de inicio de sesión y el teclado flasheado y luego se deslizó hacia abajo. Hacer clic en el botón de inicio de sesión por segunda vez ni siquiera producir el teclado más.
    • esto se ha solucionado el problema para mí. gracias.
    • Gracias por salvar mi tiempo. Que fue lo no obvio para encontrar.
    • Eres bienvenido 🙂 Que es lo que StackOverflow es para.
    • Estoy tratando de conseguir que esto funcione en un angular de la aplicación en la que un enlace se borra la entrada del texto, y quieres que el enfoque a permanecer en ese campo. Yo era capaz de conseguir el teclado para flash usando touchstart como usted ha mencionado, pero el uso de touchend el teclado todavía desaparece!
    • Yo era capaz de conseguir! En lugar de desenfocar y enfocar el elemento, simplemente he añadido event.preventDefault() en touchstart. Tenga en cuenta que esto impide que el ng-haga clic en ejecutar, así que tuve que agregar mi texto claro de la lógica en el controlador de eventos y $scope.$apply()
    • He encontrado que sólo el funcionamiento de input.focus() de un clic del botón controlador, trabajado. Safari en el iPhone 5 y el iPad. Si yo tuviera la focus() en un setTimeout, que no funciona. Así que tal vez eso es lo que «sincrónicamente» significa, @Miguel.
    • Gracias por la publicación de una real solución. El desenfoque elemento anterior de touchend + ajuste de enfoque en el evento click no funciona en iOS10 todavía.
    • Me alegro de que esta respuesta está ayudando a tantas personas después de todos estos años. Es que yo soy el más orgulloso en MODO 🙂
    • también se puede hacer async con un simple truco. En el original, haga clic en controlador tiene que crear falsas de entrada, añadir a doc cuerpo y focus() es. Esto traerá el teclado. Después de eso, cuando la entrada correcta es visible(por ejemplo, después de la llamada Ajax) sólo uso focus() de nuevo en esa entrada. Cuando tienes el teclado, puede viajar con focus() para cualquier entrada que quiere 😀
    • Usted puede elaborar en su última frase? ¿Has probado en iOS y Android?

  2. 5

    Me enfrentamos al mismo problema recientemente. He encontrado una solución que aparentemente funciona para todos los dispositivos. Usted no puede hacer async enfoque mediante programación, pero puede interruptor enfoque a su destino de entrada cuando alguna otra entrada ya está centrado. Entonces lo que hay que hacer es crear, ocultar, añadir a DOM & enfoque falso entrada en evento de disparo y, cuando la acción asincrónica completa, simplemente llame a volver a enfocarse en el objetivo de la entrada. He aquí un ejemplo de fragmento de ejecutarlo en tu móvil.

    edición:

    Aquí un el violín con el mismo código. Al parecer, usted no puede ejecutar adjunto fragmentos en los móviles (o estoy haciendo algo mal).

    JS:

    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);
    });

    CSS:

    label {
      display: block;
      margin-top: 20px;
    }
    
    input {
      box-sizing: border-box;
      font-size: inherit;
    }
    
    #container {
      position: relative;
    }
    
    #target-input {
      width: 250px;
      padding: 10px;
    }

    HTML:

    <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>

    • Esta es la mejor solución que he encontrado hasta ahora.
    • Puede establecer fontSize: '16px' para desactivar el zoom automático. También, véase mi respuesta a continuación para los nativos de js aplicación.
  3. 4

    Un nativo de javascript de la aplicación de WunderBart la respuesta.

    Desactivar el zoom automático usando el tamaño de la fuente.

    function onClick() {
    
      //create invisible dummy input to receive the focus first
      const fakeInput = document.createElement('input')
      fakeInput.setAttribute('type', 'text')
      fakeInput.style.position = 'absolute'
      fakeInput.style.opacity = 0
      fakeInput.style.height = 0
      fakeInput.style.fontSize = '16px' //disable auto zoom
    
      //you may need to append to another element depending on the browser's auto 
      //zoom/scroll behavior
      document.body.prepend(fakeInput)
    
      //focus so that subsequent async focus will work
      fakeInput.focus()
    
      setTimeout(() => {
    
        //now we can focus on the target input
        targetInput.focus()
    
        //cleanup
        fakeInput.remove()
    
      }, 1000)
    
    }
    • Esto funcionó para mí. Si desea evitar que muestra un teclado en la fakeInput enfoque, añadir readonly=»true» a la misma.
  4. 2

    He conseguido 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ás usando jQuery, así que no sé si la directiva es de ninguna ayuda.

    • Esto se conoce no funcionan en ios safari. Safari distingue específicamente entre los eventos generados por la interacción del usuario vs generada únicamente de la js en sí, y no entregar focus/seleccione los eventos de esta manera.
    • Así que no es cierto, y lo estoy usando en mis aplicaciones con Cordova/Phonegap… Y por qué voto? Cómo está mi respuesta diferente de los demás? Excepto que he creado un Angular de la Directiva puede utilizar.
    • por lo general en Angular de un tiempo de espera en sí mismo es suficiente, no es necesario establecer el valor de tiempo de espera. Se hace esperar el ciclo de digerir y por lo tanto se ejecuta en un momento cuando el resto de los eventos que están entorpeciendo el enfoque se realiza.
    • Hola @Martín, gracias por tu comentario, te refieres a los 500 me he fijado en el tiempo de espera? 🙂
    • sí, lo siento si fui claro
    • Bueno voy a probar eso. Gracias :).

  5. 2

    Tengo un formulario de búsqueda con un icono que borra el texto cuando se hace clic. Sin embargo, el problema (en mobile & tabletas) era que el teclado se derrumbaría/ocultar, como el click evento quitado focus fue retirado de la input.

    Mobile Safari: Javascript focus() método en inputfield sólo funciona con el clic?

    Objetivo: después de limpiar el formulario de búsqueda (clic o pulsando en la x-icon) mantener el teclado visible!

    Para lograr esto, se aplican stopPropagation() en el evento así:

    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>
  6. 1

    ACTUALIZACIÓN

    También he probado este, 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 en cuanto a por qué usted dice que esto no está funcionando debido a que su JSFiddle está trabajando muy bien, pero aquí está mi sugerencia de todos modos…

    Probar esta línea de código en la función SetTimeOut en su evento click:

    document.myInput.focus();

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

    <input name="myInput">

    Y utiliza este código para el desenfoque de campo:

    document.activeElement.blur();
    • Gracias, a ver mis actualizaciones en mi pregunta. Me parece que no puede hacer es trabajar con su propuesta, ya sea.
  7. 1

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

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

    disfrutar de

    • Esta CASI funciona. Pero no escala a dos datefields, y hace que la página sea un poco lento
  8. -3

    Por favor, trate de usar en el grifo en lugar de ng-haga clic en eventos. Tuve este problema. Me decidí por hacer mi claro-search-box botón dentro formulario de búsqueda de etiqueta y reemplazado ng-click de claro-botón de pulsación. Funciona bien ahora.

Dejar respuesta

Please enter your comment!
Please enter your name here