La secuencia de comandos jquery.ui.touch.punch.js impide la funcionalidad de entrada en dispositivos táctiles

Question

Me tomó un poco, pero descubrí que no puedo hacer clic en mis entradas debido a la secuencia de comandos touch.punch que estoy usando para habilitar la funcionalidad de arrastre de la interfaz de usuario de jquery en dispositivos táctiles. ¿Alguien familiarizado con este script sabe por qué podría ser? La forma realmente reside en el árbol del objeto principal. ¿Alguien sabe una forma en que puedo anular o forzar a través de la selección? Voy a probar los eventos vinculantes que fuerzan el enfoque a la entrada en este momento, pero tal vez alguien aquí tiene alguna idea?

Answer 1

Para cualquier persona que pueda terminar aquí con una situación similar utilizando el muy útil toque.punch hack, simplemente forzando la atención a través de un clic en el evento funcionará muy bien!

$('.input').bind('click', function(){ 
    $(this).focus(); 
}); 

Answer 2

OK aquí hay otra solución si su textfield cualquier elemento HTML está no se está centrando, el desplazamiento, la selección de palabras, moviendo el cursor de texto en todo el texto y lo que sea diferente escenarios podría llegar entonces es posible anular el jquery.ui . touch.punch.js script. Supongo que su elemento no es el que se puede arrastrar, pero probablemente sea un elemento secundario, como era mi caso.

Ponga una clase en su elemento html, por ejemplo class="useDefault". luego ir al archivo de guión y encontrar esa parte:

... 
function simulateMouseEvent (event, simulatedType) { 

    // Ignore multi-touch events 
    if (event.originalEvent.touches.length > 1) { 
     return; 
    } 

    event.preventDefault(); 

    var touch = event.originalEvent.changedTouches[0], 
     simulatedEvent = document.createEvent('MouseEvents'); 
.... 

Como podrán ver event.preventDefault(); asegura que jquery.ui.touch.punch.js anula el comportamiento por defecto del navegador. Para evitar que nuestro nodo particular de clase, realizar las siguientes modificaciones:

if (event.originalEvent.touches.length > 1) { 
    return; 
} 
var touch = event.originalEvent.changedTouches[0], 
    simulatedEvent = document.createEvent('MouseEvents'); 
//As you can see here is your class element check 
if (touch.target.className === "useDefault") { 
    event.stopPropagation(); 
} else { 
    event.preventDefault(); 
} 

Esta solución se prueba con webkit navegadores solamente y jQuery UI táctil ponche 0.2.2 liberación.

la esperanza de que la solución rápida ayuda, BR

Answer 3

JEditable + jQuery UI Sortable + jquery.ui.touch-punch

He pasado todo el día en este problema y finalmente me di cuenta de la solución. La solución es muy similar a la respuesta de kidwon. Sin embargo, estaba usando jeditable que crea dinámicamente campos de entrada sin nombres de clase. Así que he usado esta declaración condicional en lugar de comprobar el nombre de clase:

//Check if element is an input or a textarea 
if ($(touch.target).is("input") || $(touch.target).is("textarea")) { 
    event.stopPropagation(); 
} else { 
    event.preventDefault(); 
} 

Creo que esta es una solución mejor, ya que siempre utiliza la funcionalidad nativa para cualquier campo de entrada o de área de texto.

Answer 4

Amigos, las otras dos respuestas aquí NO funcionaron para mí, pero la solución de Danwilliger funciona; sin embargo, no está claro en su respuesta cómo configurarlo exactamente en el archivo Touch Punch JS. Para futuros buscadores de respuestas, esto es lo que debes hacer. Una vez más, esta es la solución de Danwilliger, solo estoy aclarando.

cambio en esta sección jquery.ui.touch-punch.js (aproximadamente en la línea 30):

function simulateMouseEvent (event, simulatedType) { 

// Ignore multi-touch events 
if (event.originalEvent.touches.length > 1) { 
    return; 
} 

event.preventDefault(); 

var touch = event.originalEvent.changedTouches[0], 
    simulatedEvent = document.createEvent('MouseEvents'); 

A esto:

function simulateMouseEvent (event, simulatedType) { 

// Ignore multi-touch events 
if (event.originalEvent.touches.length > 1) { 
    return; 
} 
var touch = event.originalEvent.changedTouches[0], 
    simulatedEvent = document.createEvent('MouseEvents'); 

//Check if element is an input or a textarea 
if ($(touch.target).is("input") || $(touch.target).is("textarea")) { 
    event.stopPropagation(); 
} else { 
    event.preventDefault(); 
} 

mejor de las suertes!

Answer 5

Gracias a @Danwilliger y @jeremytripp por la solución. Siendo que este problema se conoce desde hace años y, sin embargo todavía no se ha trabajado en Git repo del autor tacto-punch, que en forma de horquilla con la solución añade aquí:

https://github.com/copernicus365/jquery-ui-touch-punch/blob/master/jquery.ui.touch-punch.js

estaría muy feliz por el autor para incorporar esas pocas líneas de un cambio en la biblioteca original y hacer esto innecesario, pero si eso nunca sucede, es bueno tener un solo archivo fuente para referencia.

Answer 6

De hecho, traté de agregar las líneas que Danwilliger mencionó, no funcionó el truco para mí.

lo que funcionó para mí fue

//Check if element is an input or a textarea 
if ($(touch.target).is("input") || $(touch.target).is("textarea")) { 
    event.stopPropagation(); 
    $(touch.target).focus(); 
} else { 
    event.preventDefault(); 
} 

No estoy realmente seguro de por qué las otras respuestas publicadas no funcionaron, pero para alguien más por ahí si tienen el mismo tema a tratar mi solución fuera :).

Answer 7

La respuesta de Jacob funcionó con una ligera modificación: descubrí que el uso del evento click daba como resultado un comportamiento incoherente en iPad, ios9 Safari. A veces presioné una vez en un campo y se enfocaría, otras veces tuve que presionar tres veces. Cambio de click a touchstart resuelto el problema para mí (También utilicé delegación de eventos ya que mi forma se añadió de forma dinámica):

$('form').on('touchstart', 'input,textarea',function(){ 
    $(this).focus(); 
}); 

Answer 8

Una solución es utilizar un mango. Agregue un ícono adentro y use esto para arrastrar. Entonces las entradas funcionan bien.

<li><span class="move">Move</span><input...../></li> 

    $("#sortableList").sortable({ 

    handle: ".move" 

    }); 

Answer 9

La solución de Throttlehead funcionó para mí. Más simple quizás para simplemente usar los selectores de JQuery para cubrir todas las entradas y áreas de texto:

$('input,textarea').bind('click', function(){ 
    $(this).focus(); 
});