web-dev-qa-db-fra.com

Comment simuler: pseudo classe css active sous Android sur des éléments non liés?

J'aimerais pouvoir imiter le comportement de la pseudo-classe :active sur tous les éléments du webkit Android. Actuellement, la syntaxe :active ne fonctionne que sur les éléments a (liens). Presque tous les éléments exploitables de l'application sur laquelle je travaille sont autre chose qu'une balise de lien standard. Le webkit iOS prend en charge :active sur tous les éléments.

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

J'ai trouvé quelques ressources [1,2] qui résolvent des problèmes similaires, mais elles sont un peu lourdes et je me demande s'il existe une solution plus légère que je ne suis pas capable de trouver.

  1. http://cubiq.org/remove-onclick-delay-on-webkit-for-iphone
  2. http://code.google.com/intl/ro-RO/mobile/articles/fast_buttons.html
androidcsswebkit
20
chas s.

D'après ce que @caffein a dit, voici une implémentation complète de ceci:

Pour tout: code actif, écrivez des règles CSS qui ressemblent à ceci.

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

Ensuite, dans votre événement de préparation de document, ajoutez ce code:

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

Cela présente l'avantage d'utiliser le natif rapide: classe active sur iOS et de revenir à JavaScript sur Android.

Extrait de mon blog à http://pervasivecode.blogspot.com/2011/11/Android-phonegap-active-css-pseudo.html

EDIT: Depuis, j'ai découvert que les boutons peuvent parfois rester «bloqués» dans l'état de faux actif. Le correctif consiste à gérer également l'événement touchcancel. Par exemple. ajoutez ceci à ce qui précède ..

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

Si vous ne souhaitez utiliser aucun script qui ajoute et supprime une classe pour l'état actif d'un élément, ajoutez simplement un événement touchstart vide à la balise body:

<body ontouchstart="">

Cela indiquera au périphérique Android de gérer les événements tactiles et la pseudo-classe : active fonctionnera correctement sur tous les éléments.

15
Nadia

Version No-jQuery basée sur La solution de Ben Clayton .

EDIT: ajout de l'événement "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);
    }
  }
}
6
nagoya0

La pseudo classe ": active" est déclenchée lorsque vous cliquez ou appuyez sur un élément. Une solution de contournement pour les smartphones consiste à utiliser les événements Javascript: " ontouchstart " & " ontouchend ".

Essayez d’utiliser ontouchstart pour modifier le style et ontouchend pour déclencher l’action.

3
monsieur_h

Puisque je ne peux pas commenter, je vais ajouter une autre réponse ici.

Nadzeya a suggéré la solution suivante:

<body ontouchstart="">

Cela fonctionne comme décrit, mais je pense que cela peut aussi avoir une conséquence inattendue.

Il y a eu un problème sur notre site où les boutons cessaient parfois de fonctionner. En fait, le bouton changerait de couleur (comme s'il était enfoncé) mais l'événement click ne se déclenche pas. Même les boutons de soumission sur les formulaires ne parviendraient pas à soumettre le formulaire (pas de Javascript), même après avoir semblé pressé.

Aujourd'hui, j'ai revu le problème. Sur un coup de tête, j'ai supprimé cet attribut et le problème a disparu. Je l'ai ensuite ajouté à nouveau et le problème est revenu.

Étant donné que je ne peux pas reproduire le problème de manière fiable, je ne peux pas être sûr que ce soit la cause, mais pour le moment je vais laisser la balise éteinte et résoudre le problème: actif d'une autre manière.

1
DavidM

essaye ça. Cela fonctionne pour moi parfaitement sur Android

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

Essayez d'ajouter ce code à votre code HTML:

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

J'ai une solution de rechange facile. Cela nécessite toutefois que vous changiez de balise div en balise.

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

Veuillez trouver la source sur tutorial phone gap

0
Mani