jquery-ui - bootstrap - jquery ui touch punch examples

El script jquery.ui.touch.punch.js impide la funcionalidad de entrada en dispositivos táctiles

Question

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

Answer 1

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

Cambie esta sección en jquery.ui.touch-punch.js (en aproximadamente 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();
}

¡La mejor de las suertes!

Answer 2

De hecho, intenté agregar las líneas que mencionó Danwilliger, no me sirvieron.

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 cualquier otra persona que tenga el mismo problema, pruebe mi solución :).

Answer 3

Gracias a @Danwilliger y @jeremytripp por la solución. Siendo que este problema se conoce desde hace años y aún no se ha trabajado en el repositorio de Git del autor de touch-punch, lo combiné con la solución agregada aquí:

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

Me encantaría que el autor incorpore esas pocas líneas de un cambio en la biblioteca original y haga que esta no sea necesaria en ese momento, pero si eso nunca sucede, es bueno tener un solo archivo fuente para referencia.

Answer 4

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

He pasado todo el día en este problema y finalmente encontré 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 utilicé esta declaración condicional en lugar de verificar el nombre de la 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 usa la funcionalidad nativa para cualquier campo de entrada o área de texto.

Answer 5

La respuesta de Jacob funcionó con una ligera modificación: descubrí que el uso del evento click daba como resultado un comportamiento inconsistente en el iPad, ios9 Safari. A veces presionaba una vez en un campo y se enfocaba, otras veces tenía que presionar tres veces. El cambio de click a touchstart solucionó el problema por mí (también usé la delegación de eventos porque mi formulario se agregó dinámicamente):

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

Answer 6

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

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

Answer 7

OK, aquí hay otra solución si su campo de textfield sea textfield sea ​​el elemento HTML, no se está enfocando, desplazando, seleccionando palabras, moviendo el cursor del texto alrededor del texto y cualquier escenario diferente que pueda surgir, puede anular el script jquery.ui.touch.punch.js Supongo que su elemento no es el que se puede arrastrar, pero probablemente sea un hijo de él como fue mi caso.

Coloque una clase en su elemento html, por ejemplo, class="useDefault" . Luego ve al archivo de script y encuentra 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 probablemente puedas ver event.preventDefault(); asegura que jquery.ui.touch.punch.js anula los comportamientos predeterminados del navegador. Para evitar que para nuestro nodo de clase particular, haga 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 ha probado solo con navegadores webkit y la versión jQuery UI Touch Punch 0.2.2 .

Espero que la solución rápida ayude, BR

Answer 8

Para cualquier persona que pueda terminar aquí con una situación similar utilizando el muy útil touch.punch, simplemente forzar el enfoque en un evento de clic funcionará bien.

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

Answer 9

Una solución es usar un mango. Agrega un ícono dentro y usa esto para arrastrar. Entonces las entradas funcionan bien.

<li><span class="move">Move</span><input...../></li>
$("#sortableList").sortable({
handle: ".move"
});