descargar - como activar javascript en safari iphone

iScroll 4 no funciona con el elemento formulario<seleccionar> iPhone Safari y navegador Android

Question

Estoy usando este código HTML:

<form action="#" method="post">
    <fieldset>
        <label class="desc" id="title10" for="Field10">
            How many children do you have?
        </label>        
        <select id="Field10" name="Field10" class="field select large" tabindex="5">
            <option value="0" selected="selected">0 </option>
            <option value="1">1 </option>
            <option value="2">2 </option>
            <option value="3">3 </option>
            <option value="4">4 </option>
            <option value="5">5 </option>
            <option value="6">6 </option>
            <option value="7">7 </option>
            <option value="8">8 </option>
            <option value="9">9 </option>
        </select>
        <input type="submit" value="Send message" />
    </fieldset>
</form>

<select> no funciona en iPhone y Android. Cuando toco en la casilla de selección no sucede nada.

Estoy usando iScroll 4, que está creando el problema.

<script type="application/javascript" src="iscroll-lite.js"></script>
<script type="text/javascript">
    var myScroll;
    function loaded() {
        myScroll = new iScroll(''wrapper'');
    }
    document.addEventListener(''touchmove'', function (e) { e.preventDefault(); }, false);
    document.addEventListener(''DOMContentLoaded'', loaded, false);
</script>

Creo que esta es una solución, pero no sé cómo implementarla.

Answer 1

él cualquiera.

Sé acerca de todas sus respuestas, pero tengo una nueva forma de ofrecer. sin las funciones java-script o drop iscroll.

El gran problema con toda esta solución es cuando te desplazas por el elemento de entrada y no tienes desplazamiento en la página. cuando haces solo una o dos entradas, no importa, pero cuando la página es un formulario, tienes un gran problema para desplazarte por la página.

la solución que ofrezco es envolver la entrada en la etiqueta de la etiqueta o hacer que la etiqueta sea etiquetada como puntero a la entrada. luego realice con posicionamiento absoluto e índice Z la etiqueta arriba de la entrada. cuando tocas la etiqueta enfocas la entrada.

y ejemplo por favor

HTML

<fieldset>
<label>
    <input type="text" />
</label>
</fieldset>

CSS

fieldset {position:relative;z-index:20;}
label {position:relative;z-index:initial;}
input {position:relative;z-index:-1;}

también puede poner el lado de la etiqueta de la entrada y con la posición absoluta de la entrada poner eso en el área de la etiqueta

funciona al 100%, compruébalo

Answer 2

¿Qué tal, eso funciona para mí !:

$(''input, select'').on(''touchstart'', function(e) {
    e.stopPropagation();
});

Answer 3

Aquí está la solución

/* on page add this after all scripts */
    <script type="text/javascript">
            var myScroll;
            function loaded() {
                myScroll = new iScroll(''wrapper'');
            }
            document.addEventListener(''DOMContentLoaded'', function(){ setTimeout(loaded,500);}, false);
    </script>

/* attach a script for fix */
        $(document).ready(function(){
            var my_select = document.getElementsByTagName(''select'');
            for (var i=0; i<my_select.length; i++) {
                my_select[i].addEventListener(''touchstart'' /*''mousedown''*/, function(e) {
                    myScroll.destroy();
                    setTimeout(function(){myScroll = new iScroll(''wrapper'');},500);
                }, false);
            }

    /*if you have input problems */

            var input = document.getElementById(''input'');

            if (input) {
                input.addEventListener(''touchstart'' /*''mousedown''*/, function(e) {
                    e.stopPropagation();
                }, false);
            }    
        });

Answer 4

Aquí hay una solución realmente fácil que funcionó para mí. Me di cuenta en los navegadores de Android que en la carga de la página inicial no podía hacer clic en un cuadro de selección, pero pude hacer clic en un campo de entrada de texto que estaba usando para la búsqueda. Luego noté que después de hacer clic en el campo de entrada de texto, me reconocería haciendo clic en un cuadro de selección. Entonces todo lo que hice fue agregar esto a la función javascript que estaba usando para cargar la página de búsqueda ...

$(''#search'').focus();

Entonces, cuando se carga la página de búsqueda, se enfoca automáticamente en el campo de entrada de texto, pero no aparece el teclado, que es exactamente lo que yo quería. Lo siento, mi ejemplo no es públicamente accesible, pero espero que esto pueda ayudar a alguien.

Answer 5

Comience con este código. Esta solución funcionó para mí:

<script type="text/javascript">

var myScroll;
function iScrollLoad() {
    myScroll = new iScroll(''wrapper'');
    enableFormsInIscroll();
}

function enableFormsInIscroll(){
  [].slice.call(document.querySelectorAll(''input, select, button, textarea'')).forEach(function(el){
    el.addEventListener((''ontouchstart'' in window)?''touchstart'':''mousedown'', function(e){
      e.stopPropagation();
    })
  })
}

document.addEventListener(''touchmove'', function (e) { e.preventDefault(); }, false);
document.addEventListener(''DOMContentLoaded'', function () { setTimeout(iScrollLoad, 200); }, false);

</script>

Answer 6

El error del navegador Android es el resultado de una versión muy antigua de WebKit dentro de Android, incluso dentro de Android 4.3. La causa raíz de la falla: procesamiento incorrecto del evento de clic que iScroll envía de vuelta al navegador (eliminando que prevenirDefault simplemente deje de enviar este evento de clic) El navegador Android Chrome está libre de este error porque ha actualizado la biblioteca WebKit dentro.

Esperando la actualización de Android WebKit de Google.

Answer 7

El problema es que iScroll cancela el comportamiento predeterminado de tu etiqueta de select (no es una implementación muy buena si me preguntas).

Esto ocurre en la función _start() en la línea 195:

e.preventDefault();

Si lo comenta, notará que la etiqueta de select funciona nuevamente.

Pero comentarlo significa que has pirateado la biblioteca, lo que podría romper otras funciones deseables de iScroll. Así que aquí hay una mejor solución:

var selectField = document.getElementById(''Field10'');
selectField.addEventListener(''touchstart'' /*''mousedown''*/, function(e) {
    e.stopPropagation();
}, false);

Ese código permitirá que ocurra el comportamiento predeterminado, sin propagar el evento a iScroll donde lo arruina todo.

Como su JS no está dentro de ningún evento onReady() jQuery, tendrá que asegurarse de poner este código DESPUÉS del HTML donde se definen sus elementos select .

Tenga en cuenta que para los dispositivos móviles el evento es touchstart , pero para el navegador de su PC será mousedown

Answer 8

Existe un error con Android cuando -webkit-transform: translate3d se aplica a un contenedor que tiene un cuadro de selección o un cuadro de contraseña [1]. El área en recuadro para activar esos elementos se mueve, y no están donde crees que estarían. Además, los cuadros de contraseña pintan en una ubicación diferente, por lo que parece que tiene dos elementos de entrada en lugar de uno.

Trabajo en AppMobi y hemos desarrollado una biblioteca de kits de herramientas que tiene soluciones para estos. Hemos implementado widgets de cuadro de selección personalizados y un reemplazo para el campo de entrada de contraseña. Compruébalo a continuación.

https://github.com/imaffett/AppMobi.toolkit

[1] Creo que el autor del comentario está hablando de este error https://bugs.webkit.org/show_bug.cgi?id=50552

Answer 9

Finalmente arregló esto para Android. Terminó modificando un par de líneas en iscroll.js

Así es como iniciamos iScroll.

// code from https://github.com/cubiq/iscroll/blob/master/examples/form-fields/index.html
// don''t preventDefault for form controls
_menuScroll = new iScroll(''menu_wrapper'',{
    useTransform: false,
    onBeforeScrollStart: function (e) {
        var target = e.target;
        while (target.nodeType != 1) target = target.parentNode;

        if (target.tagName != ''SELECT'' && target.tagName != ''INPUT'' && target.tagName != ''TEXTAREA'')
        e.preventDefault();
    }
});

El onBeforeScrollStart es lo que permite que los comportamientos predeterminados de los controles tengan lugar. El navegador Android parece tener problemas con useTransform, por lo tanto, cambia a falso.

Finalmente, es necesario excluir algún código iscroll adicional cuando useTransform sea falso:

// iscroll.js v4.1.9
// line 216:
if (that.options.useTransform) bar.style.cssText += '';pointer-events:none;-'' + vendor + ''-transition-property:-'' + vendor + ''-transform;-'' + vendor + ''-transition-timing-function:cubic-bezier(0.33,0.66,0.66,1);-'' + vendor + ''-transition-duration:0;-'' + vendor + ''-transform:'' + trnOpen + ''0,0'' + trnClose;

// line 295:
if (that.options.useTransform) that[dir + ''ScrollbarIndicator''].style[vendor + ''Transform''] = trnOpen + (dir == ''h'' ? pos + ''px,0'' : ''0,'' + pos + ''px'') + trnClose;

Intenté varios otros métodos antes de darme cuenta de que tenía que ver con el CSS que iscroll agrega.

Answer 10

Incluso si ha excluido elementos de formulario en onBeforeScrollStart (), hay otro error en el navegador / vista web de Android 2.2 / 2.3:

https://www.html5dev-software.intel.com/viewtopic.php?f=26&t=1278 https://github.com/01org/appframework/issues/104

No puede ingresar caracteres chinos en elementos de entrada en el div con el estilo css "-webkit-transform". El iscroll 4 aplicó la "-webkit-transform" con la div del desplazamiento.

La solución es mantener los campos de formulario en una div absoluta del desplazamiento.

Answer 11

Llego tarde, pero te dejo mi solución.

Si está usando jQuery, puede intentarlo.

$(''input, textarea, button, a, select'').off(''touchstart mousedown'').on(''touchstart mousedown'', function(e) {
    e.stopPropagation();
});

Answer 12

Llego un poco tarde al juego, pero si alguien sigue interesado, tomé el approach de @bastien y lo puse un poco para que funcione en Android. Estoy usando JQM con mi implementación.

Básicamente lo que hice fue:

function scrollMe(element) {

var contentID = $wrapper.get(0).id;
var scroller = elm.find(''[data-iscroll="scroller"]'').get(0);
if (scroller) {
    var iscroll = new iScroll(contentID, {
        hScroll        : false,
        vScroll        : true,
        hScrollbar     : false,
        vScrollbar     : true,
        fixedScrollbar : true,
        fadeScrollbar  : false,
        hideScrollbar  : false,
        bounce         : true,
        momentum       : true,
        lockDirection  : true,
        useTransition  : true, 
        //the preceding options and their values do not have any to do with the fix
        //THE FIX:
        onBeforeScrollStart: function(e) {
            var nodeType = e.explicitOriginalTarget ? e.explicitOriginalTarget.nodeName.toLowerCase() : (e.target ? e.target.nodeName.toLowerCase():''''); //get element node type
            if(nodeType !=''select'' && nodeType !=''option'' && nodeType !=''input'' && nodeType!=''textarea'') e.preventDefault(); //be have normally if clicked element is not a select, option, input, or textarea.
            else if (iscroll != null) {   //makes sure there is an instance to destory
                     iscroll.destroy(); 
                     iscroll = null;
            //when the user clicks on a form element, my previously instanced iscroll element is destroyed
            }
        },
        onScrollStart: function(e) { 
            if (iscroll == null) {  //check to see if iscroll instance was previously destoryed 
                var elm = $.mobile.activePage; //gets current active page
                var scrollIt = setTimeout( function(){ scrollMe(elm) }, 0 ); 
            } //recursively call function that re-instances iscroll element, as long as the user doesn''t click on a form element
        } 
    });
    elm.data("iscroll-plugin", iscroll);
}

}

Básicamente, todo lo que necesita hacer es destruir su instancia de iScroll cuando el usuario selecciona un elemento de formulario, pero antes de que realmente comience a desplazarse (onBeforeScrollStart) y si el usuario hace clic en cualquier otra cosa dentro del elemento con el atributo personalizado data-iscroll="scroller" , pueden desplazarse usando iScroll como de costumbre.

<div data-role="page" id="pageNameHere" data-iscroll="enable">

Answer 13

Mira esto. Esto solucionó mi problema

https://github.com/cubiq/iscroll/issues/576

En la opción que he seleccionado

click:false, preventDefaultException:{tagName:/.*/}

Answer 14

Sé que llego tarde, pero podría ser útil para alguien,

escriba el siguiente código en el evento pageshow, pero asegúrese de que los identificadores div no sean iguales.

es porque, iscroller evita los comportamientos predeterminados de los elementos

 $(''#yourpage'').bind(''pageshow'',function (event, ui) {

       var myScroll;

         if (this.id in myScroll) {
         myScroll[this.id].refresh();

         }else{ 

          myScroll[this.id] = new iScroll(''wrapper'', { //wrapper is div id
                   checkDOMChanges: true,
                   onBeforeScrollStart: function (e) {
                         var target = e.target;
                         while (target.nodeType != 1) 
                         target =target.parentNode;

                   if (target.tagName != ''SELECT'' && target.tagName != ''INPUT'' && target.tagName != ''TEXTAREA''){  e.preventDefault();  }
                                 }
                               });
                            }
     document.addEventListener(''touchmove'', function (e) { e.preventDefault(); }, false);

     });

Answer 15

Sustituir línea, onBeforeScrollStart: function (e) { e.preventDefault(); }, onBeforeScrollStart: function (e) { e.preventDefault(); },

Por

onBeforeScrollStart: function (e) {
    var nodeType = e.explicitOriginalTarget ? e.explicitOriginalTarget.nodeName.toLowerCase():(e.target ? e.target.nodeName.toLowerCase():'''');

    if(nodeType !=''select'' && nodeType !=''option'' && nodeType !=''input'' && nodeType!=''textarea'') {
         e.preventDefault();
    }
},

En iScroll.js funciona

Answer 16

Tuve el mismo problema en el iScroll 4.1.9 en Android, acabo de reemplazar la línea 95 (en mi versión):

onBeforeScrollStart: function (e) { e.preventDefault(); },

por:

onBeforeScrollStart: function (e) {var nodeType = e.explicitOriginalTarget ? e.explicitOriginalTarget.nodeName.toLowerCase():(e.target ? e.target.nodeName.toLowerCase():''''); if(nodeType !=''select'' && nodeType !=''option'' && nodeType !=''input'' && nodeType!=''textarea'') e.preventDefault(); },           

que permiten enfocarse en las etiquetas input, select y textarea

Answer 17

otro ejemplo de código para la solución. y gracias por los comentarios anteriores! Usando Jquery!

Después:

$(document).ready(function() {            
    document.addEventListener(''touchmove'', function (e) { e.preventDefault(); }, false);

    document.addEventListener(''DOMContentLoaded'', setTimeout(function () { loaded(); }, 200), false);
});

en la función cargada

function loaded() {
    var allSelects = $(''select'');
    allSelects.each(function(index, item) {
                        item.addEventListener(''touchstart'' /*''mousedown''*/, function(e) { e.stopPropagation(); }, false);
                    });
}

Answer 18

pruebe esta solución si (e.target.nodeName.toLowerCase () == "select" || e.target.tagName.toLowerCase () == ''input'' || e.target.tagName.toLowerCase () == ''textarea '') {
regreso; }

Answer 19

  // Setup myScroll
  myScroll = new IScroll(''#wrapper'', {
    scrollX: horizontalSwipe,
    scrollY: !horizontalSwipe,
    momentum: false,
    snap: document.querySelectorAll(''#scroller .slide''),
    snapSpeed: 400,
    bounceEasing: ''back'',
    keyBindings: true,
    click: true
  });

Para mí, solo necesito agregar click: verdadero en la última línea ... Pasé todo el día depurando e implementando todas las soluciones sugeridas en vano ...