With bootstrap buttons on mobile they stay ’ clicked down’ and don’t ‘come up’ until you manually click elsewhere.
I have done some searching but all these attempts fail
$(".btn").mouseup(function() {
$.jGrowl(' did it happen');
// Removes focus of the button. to make th button in mobole come back up
$(this).blur(); // should remove the focus on the selected button
$(Button1).blur();
$( "#btnJoinRoom1" ).trigger( "click" ); //set the focus elsewhere
$( "#txtFingerPrint" ).focus(); //set the focus elsewhere
$( "#txtFingerPrint" ).keydown(); //set the focus elsewhere
});
The problem doesn’t occur on desktop.
I am using BS theme slate.
On mobile I get 2 different results.
On android
When clicked on I see the button change colour and an orange border.
When the time out happens the border disappears.
The colour change remains until I click elsewhere then it is restored.
On IOS
When clicked on I see the button change colour.
When the time out happens the border disappears.
The colour change remains until I click elsewhere then it is restored.
There are two issues here, focus and hover. George’s suggestion addresses the focus issue by blurring the control, which is effective on both mobile and desktop. But neither Android nor iOS remove hover from a tapped control, which for BS use results in an appearance similar to focus, but slightly different. So additional effort on mobile is needed.
Various user workarounds abound due to BS electing not to wade in with hacks (at least for now).
Here’s one solution you may find helpful; it works on both desktop and mobile for me:
$(".btn").on("click", function() {
$(this).blur(); // basically George's solution, but for all BS buttons
});
$(".btn").on("touchstart", function() {
$(this).removeClass("mobileHoverFix");
});
$(".btn").on("touchend", function() {
$(this).addClass("mobileHoverFix");
});
Then, in Project CSS, create that class but apply it only on the hover state:
I used jQuery/JS format for my code above since your attempts were also in that format.
Note that the background color I chose matches the default BS btn-primary color. You’ll want to adjust that for your own needs.
Note too that I elected to match all BS buttons for the touchstart/end code. You may only want to match specific controls rather than paint with such a wide brush.