Cómo simular: pseudo clase css activa en android en elementos sin enlace?

Me gustaría poder imitar el comportamiento de la pseudo clase :active en todos los elementos en Android webkit. Actualmente, la sintaxis :active solo funciona en elementos a (enlaces). Casi todos los elementos accionables en la aplicación en la que estoy trabajando son algo más que una etiqueta de enlace estándar. iOS webkit es compatible con :active en todos los elementos.Cómo simular: pseudo clase css activa en android en elementos sin enlace?

/* works on both android iOS webkit */ 
a:active { 
    color: blue; 
} 
/* works on iOS webkit, does not work on android webkit */ 
div:active { 
    color: red; 
}

He encontrado un par de recursos [1,2] que resuelven problemas similares, pero los dos son un poco pesado, y me pregunto si hay una solución peso más ligero que sólo soy no puede encontrar

Fuente

2011-02-09 chas s.

El "activo" pseudo clase se activa cuando en realidad se hace clic o pulsa un elemento. Una solución para los teléfonos inteligentes es usar los eventos de Javascript: "ontouchstart" "ontouchend".

Trate de usar ontouchstart para modificar el estilo y ontouchend para activar realmente la acción.

Fuente

2011-03-01 16:58:11

Sobre la base de lo que @caffein dicho, aquí es una implementación completa de este:

Para todos: código activo, escribir reglas CSS que se ven así.

my-button:active, .my-button.fake-active { 
background-color: blue; 
}

Luego, en su caso documento listo agregue este código:

if (navigator.userAgent.toLowerCase().indexOf("android") > -1) { 
$(".my-button") 
.bind("touchstart", function() { 
    $(this).addClass("fake-active"); 
}) 
.bind("touchend", function() { 
    $(this).removeClass("fake-active"); 
}); 
}

Esto tiene la ventaja de utilizar el hablante nativo: activa clase en IOS, y cayendo de nuevo a JavaScript en Android.

Tomado de mi blog en http://pervasivecode.blogspot.com/2011/11/android-phonegap-active-css-pseudo.html

EDIT: ya he descubierto que en ocasiones puede botones 'palo' en el estado falso-activo. La solución para esto es manejar también el evento touchcancel. P.ej. añadir esto a lo anterior ..

.bind("touchcancel", 
function() { 
    var $this = $(this); 
    $this.removeClass("fake-active"); 
});

Fuente

2011-11-16 12:33:58

Utiliza jQuery. Una respuesta sin una biblioteca externa hubiera sido más simple. –

@caffein, probablemente no habría sido "simplier". ¿Has visto la API nativa de JS DOM? Además, se arruinaría con el soporte de navegador cruzado. el objetivo de jquery es "simplierfy" – MikeMurko

, sí, pero usar jQuery en el móvil es una mala idea –

versión sin jQuery basado en Ben Clayton's solution.

EDITAR: agregó el evento "touchmove".

function hasClass(ele,cls) { 
    return ele.className.match(new RegExp("(\\s|^)"+cls+"(\\s|$)")); 
} 
function addClass(ele,cls) { 
    if (!this.hasClass(ele,cls)) ele.className += " "+cls; 
} 
function removeClass(ele,cls) { 
    if (hasClass(ele,cls)) { 
    var reg = new RegExp("(\\s|^)"+cls+"(\\s|$)"); 
    ele.className=ele.className.replace(reg," "); 
    } 
} 

window.onload = function() { 
    if (navigator.userAgent.toLowerCase().indexOf("android") > -1) { 
    var elements = document.getElementsByClassName("my-button"); 
    for(var i = 0; i < elements.length; i++) { 
     var elm = elements[i]; 
     elm.addEventListener("touchstart", function() { 
     addClass(this, "fake-active");}, false); 
     elm.addEventListener("touchmove", function() { 
     removeClass(this, "fake-active");}, false); 
     elm.addEventListener("touchend", function() { 
     removeClass(this, "fake-active");}, false); 
     elm.addEventListener("touchcancel", function() { 
     removeClass(this, "fake-active");}, false); 
    } 
    } 
}

Fuente

2012-04-07 22:01:27 nagoya0

Estoy usando esto ahora. Tenga en cuenta que this.hasClass debe ser ele.hasClass. Aún así, el código hasClass/addClass/removeClass no funcionó para mí. En cambio, utilicé: https://developer.mozilla.org/en-US/docs/Web/API/element.classList –

Si no desea utilizar cualquier secuencia de comandos, que agrega y quita la clase de estado activo de un elemento, basta con añadir vacío touchstart evento para el cuerpo de la etiqueta:

<body ontouchstart="">

Este le dirá al dispositivo Android que maneje los eventos táctiles y pseudo class : active funcionará correctamente en todos los elementos.

Fuente

2012-11-26 10:04:17 Nadia

¡Vaya, esto solucionó mi problema con iOS que no activaba el estado activo! ¡Gracias! – Titan

Esto funcionó bien para css: active para que realmente funcione correctamente. Si usa Jsoup esto puede agregarse fácilmente como: documento final html = Jsoup.parseBodyFragment (content); html.body(). Attr ("ontouchstart", ""); – Codeversed

No funciona para Android 2.1. – Sawny

prueba esto.A mí me funciona perfectamente en Android

.my-button { 
    -webkit-tap-highlight-color: blue; 
}

Fuente

2013-05-08 08:50:11 MaXo

Intentar añadir este código a su HTML:

<script> 
document.body.addEventlistener('touchstart',function(){},false); 
</script>

Fuente

2013-09-06 09:51:50 RyanBay

Ya que no puedo comentar, voy a añadir otra respuesta aquí.

Nadzeya sugirió la siguiente solución:

<body ontouchstart="">

Esto funciona como se describe, pero creo que también puede tener una consecuencia no deseada.

Ha habido un problema en nuestro sitio donde los botones ocasionalmente dejan de funcionar. De hecho, el botón cambiaría de color (como si estuviera presionado) pero el evento click no se dispararía. Incluso enviar botones en formularios no podría enviar el formulario (sin Javascript), incluso después de aparecer presionado.

Hoy volví a ver el problema. Por un capricho, eliminé este atributo y el problema desapareció. Luego lo agregué nuevamente y el problema volvió.

Como no puedo reproducir el problema de manera confiable, no puedo estar seguro de que esta sea la causa, pero por ahora voy a dejar la etiqueta y resolver el problema: activo de otra manera.

Fuente

2014-03-14 21:19:19 DavidM

sólo necesitas poner este código en su documento:

<script type="application/x-javascript">document.addEventListener('touchmove', function(e){e.preventDefault();}, false);</script>

Fuente

2014-03-24 08:53:21

que tiene una solución alternativa fácil. Sin embargo, esto requiere que cambies de la etiqueta div a una etiqueta.

<a class="html5logo" href="javascript:void(0);" ontouchstart="return true;"></a> 

.html5logo { 
    display: block; 
    width: 128px; 
    height: 128px; 
    background: url(/img/html5-badge-128.png) no-repeat; 
    -webkit-tap-highlight-color: rgba(0,0,0,0); 
    -webkit-tap-highlight-color: transparent; /* For some Androids */ 
} 
.html5logo:active { 
    -webkit-transform: scale3d(0.9, 0.9, 1); 
}

Por favor, encontrar la fuente en phone gap tutorial

Fuente

2016-03-28 14:30:27 Mani

Cómo simular: pseudo clase css activa en android en elementos sin enlace?

Respuesta

Cuestiones relacionadas