How to simulate :active css pseudo class in android on non-link elements?

Question

I'd like to be able to mimic the behavior of the :active pseudo class on all elements in Android webkit. Currently, the :active syntax only works on a elements (links). Nearly all of the actionable elements in the app I'm working on are something other than a standard link tag. iOS webkit supports :active on all elements.

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

I've found a couple of resources [1,2] that solve similar problems, but they're both a bit heavy, and I'm wondering if there's a lighter weight solution that I'm just not able to find.

Ben Clayton · Answer 1 · 2011-11-16T16:35:59.730

21

Based on what @caffein said, here's a full implementation of this:

For all :active code, write CSS rules that look like this.

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

Then in your document ready event add this code:

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

This has the advantage of using the fast native :active class on iOS, and dropping back to JavaScript on Android.

Taken from my blog at http://pervasivecode.blogspot.com/2011/11/android-phonegap-active-css-pseudo.html

EDIT: I've since discovered that buttons can occasionally 'stick' in the fake-active state. The fix for this is to also handle the touchcancel event. E.g. add this to the above..

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

edited Nov 16 '11 at 16:35

answered Nov 16 '11 at 12:33

Ben Clayton

80,996
26
120
129

2

It uses jQuery. A response without any external library would've been simplier. – monsieur_h Apr 05 '12 at 10:23
3

@caffein, it probably wouldn't have been "simplier". have you seen the native JS DOM api? also, you would be ruined with cross browser support. the whole point of jquery is to "simplierfy" – MikeMurko Sep 19 '12 at 13:53
1

yeah but using jQuery on mobile is a bad idea – Jad Joubran Jun 21 '13 at 12:51
The whole thing is a bit weird, :active behaves like :hover on touch devices – unexist Feb 13 '14 at 15:04
Yeah I'm suffering from the "stuck in active state" issue on Android now - super annoying. Why in the world did Android not enable the :active behavior?! – Christopher Jul 10 '14 at 11:41

score 16 · Answer 2 · answered Nov 26 '12 at 10:04

16

If you don't want to use any script, which adds and removes class for active state of an element, just add empty touchstart event to the body tag:

<body ontouchstart="">

This will tell the android device to handle touch events and pseudo class :active will work correctly on all elements.

answered Nov 26 '12 at 10:04

Nadia

161
1
3

1

Wow this fixed my issue with iOS not triggering active state! Thank you! – Titan Feb 11 '13 at 16:39
This worked well for css :active to actually work correctly. If your using Jsoup this can easily be added like: final Document html = Jsoup.parseBodyFragment(content); html.body().attr("ontouchstart",""); – Codeversed Apr 05 '13 at 19:45

score 6 · Answer 3 · edited May 23 '17 at 12:34

No-jQuery version based on Ben Clayton's solution.

EDIT: added "touchmove" event.

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

I am using this now. Note, this.hasClass must be ele.hasClass. Still, the hasClass/addClass/removeClass code didn't work for me. Instead I used: https://developer.mozilla.org/en-US/docs/Web/API/element.classList — Boris van Schooten, Oct 08 '14 at 11:36

score 3 · Answer 4 · answered Mar 01 '11 at 16:58

The ":active " pseudo class is triggered when you actually click or press an element. A workaround for smartphones is to use the Javascript events: "ontouchstart" & "ontouchend".

Try using ontouchstart to modify the style and ontouchend to actually trigger the action.

score 1 · Answer 5 · answered Mar 14 '14 at 21:19

Since I can't comment, I'm going to add another answer here.

Nadzeya suggested the following solution:

<body ontouchstart="">

This does work as described, but I believe it may also have an unintended consequence.

There has been a problem on our site where buttons would occasionally stop working. In fact, the button would change colors (as if it was pressed) but the click event wouldn't fire. Even submit buttons on forms would fail to submit the form (no Javascript involved), even after appearing pressed.

Today, I saw the problem again. On a whim, I removed this attribute and the problem went away. I then added it again and the problem came back.

Since I can't reproduce the problem reliably, I can't be certain that this was the cause, but for now I'm going to leave the tag off and solve the :active problem another way.

score 0 · Answer 6 · answered May 08 '13 at 08:50

0

try this. It works for me perfectly on Android

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

answered May 08 '13 at 08:50

MaXo

81
3

score 0 · Answer 7 · answered Sep 06 '13 at 09:51

0

Trying add this code to your HTML:

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

answered Sep 06 '13 at 09:51

RyanBay

61
1
2

score 0 · Answer 8 · answered Mar 28 '16 at 14:30

I got an easy alternate solution. This however requires you to change from div tag to 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);
}

Please find the source at phone gap tutorial

score -1 · Answer 9 · answered Mar 24 '14 at 08:53

-1

you just need put this code in your document:

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

answered Mar 24 '14 at 08:53

Jack.Chan

19
4

This will disable scrolling as well, which is not what the OP wanted. – Robert Moore Apr 13 '18 at 19:58

How to simulate :active css pseudo class in android on non-link elements?

9 Answers9

Linked