Come simulare: pseudo classe css attiva in Android su elementi non linkati?

Mi piacerebbe essere in grado di simulare il comportamento della pseudo classe :active su tutti gli elementi del webkit Android. Attualmente, la sintassi :active funziona solo sugli elementi a (collegamenti). Quasi tutti gli elementi utilizzabili nell'applicazione a cui sto lavorando sono qualcosa di diverso da un tag di collegamento standard. Il web kit iOS supporta :active su tutti gli elementi.Come simulare: pseudo classe css attiva in Android su elementi non linkati?

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

ho trovato un paio di risorse [1,2] che risolvono i problemi simili, ma sono entrambi un po 'pesante, e mi chiedo se c'è una soluzione più leggera che io sono solo non in grado di trovare.

fonte

2011-02-09 chas s.

Il ": attiva" class pseudo viene attivato quando effettivamente fa clic o si preme un elemento. Una soluzione alternativa per gli smartphone consiste nell'utilizzare gli eventi Javascript: "onuchstart" & "onuchend".

Prova utilizzando ontouchstart di modificare lo stile e ontouchend per innescare in realtà l'azione.

fonte

2011-03-01 16:58:11

In base a quanto @caffein Detto questo, ecco un'implementazione completa di questo:

Per tutti: codice attivo, scrivere le regole CSS che assomigliano a questo.

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

Poi nel documento evento pronto aggiungere questo codice:

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

Questo ha il vantaggio di utilizzare il nativo veloce: attiva classe su iOS, e far cadere di nuovo a JavaScript su Android.

preso dal mio blog a http://pervasivecode.blogspot.com/2011/11/android-phonegap-active-css-pseudo.html

EDIT: ho scoperto che dal pulsanti possono di tanto in tanto 'bastone' nello stato finto-attivo. La correzione per questo è anche per gestire l'evento touchcancel. Per esempio. aggiungere questo a quanto sopra ..

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

fonte

2011-11-16 12:33:58

Esso utilizza jQuery. Una risposta senza alcuna libreria esterna sarebbe stata più semplice. –

@caffein, probabilmente non sarebbe stato "più semplice". hai visto il nativo JS DOM api? inoltre, verrebbe rovinato con il supporto per browser incrociati. l'intero punto di jquery è "simplierfy" – MikeMurko

sì, ma usare jQuery sul cellulare è una cattiva idea –

versione No-jQuery sulla base di Ben Clayton's solution.

MODIFICA: aggiunto 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); 
    } 
    } 
}

fonte

2012-04-07 22:01:27 nagoya0

Sto usando questo ora. Nota, this.hasClass deve essere ele.hasClass. Tuttavia, il codice hasClass/addClass/removeClass non ha funzionato per me. Invece ho usato: https://developer.mozilla.org/en-US/docs/Web/API/element.classList –

Se non si desidera utilizzare qualsiasi script, per aggiungere e rimuovere classe per stato attivo di un elemento, è sufficiente aggiungere vuoto TouchStart evento al tag body:

<body ontouchstart="">

Questo dirà al dispositivo Android di gestire gli eventi tattili e la pseudo classe : attivo funzionerà correttamente su tutti gli elementi.

fonte

2012-11-26 10:04:17 Nadia

Wow questo ha risolto il mio problema con iOS non attivando lo stato attivo! Grazie! – Titan

Questo ha funzionato bene per i CSS: attivo per funzionare correttamente. Se si utilizza Jsoup, questo può essere facilmente aggiunto come: documento finale html = Jsoup.parseBodyFragment (contenuto); html.body(). Attr ("ontouchstart", ""); – Codeversed

Non funziona per Android 2.1. – Sawny

provare questo.Funziona per me perfettamente su Android

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

fonte

2013-05-08 08:50:11 MaXo

Cercando aggiungere questo codice al vostro HTML:

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

fonte

2013-09-06 09:51:50 RyanBay

Dal momento che non posso commentare, ho intenzione di aggiungere un'altra risposta qui.

Nadzeya suggerito la seguente soluzione:

<body ontouchstart="">

Questo funziona come descritto, ma credo che può anche avere una conseguenza involontaria.

C'è stato un problema sul nostro sito in cui i pulsanti avrebbero smesso di funzionare occasionalmente. In effetti, il pulsante cambierebbe i colori (come se fosse stato premuto), ma l'evento click non sparava. Persino i pulsanti di invio sui moduli non riuscirebbero a inviare il modulo (non sono coinvolti Javascript), anche dopo essere stati visualizzati.

Oggi ho visto di nuovo il problema. Per un capriccio, ho rimosso questo attributo e il problema è andato via. L'ho poi aggiunto di nuovo e il problema è tornato.

Dal momento che non riesco a riprodurre il problema in modo affidabile, non posso essere certo che questa fosse la causa, ma per ora ho intenzione di lasciare il tag e risolvere il problema attivo in un altro modo.

fonte

2014-03-14 21:19:19 DavidM

si solo bisogno di inserire questo codice nel documento:

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

fonte

2014-03-24 08:53:21

ho ottenuto una soluzione alternativa facile. Questo tuttavia richiede di cambiare da tag div a tag.

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

Si prega di trovare la fonte a phone gap tutorial

fonte

2016-03-28 14:30:27 Mani

Come simulare: pseudo classe css attiva in Android su elementi non linkati?

risposta

Problemi correlati