I am using PhoneGap and I need to catch a "keyboard is showing" event on android phones.
I've found some threads saying to use the "showkeyboard" event. (This one for example : Show hide keyboard is not working propery in android phonegap)
My question : Is this an android event usable with phonegap? Is this a simple phonegap event? Is this a browser event? Is this a classical javascript event?
I don't find any doc on this event, and I need it because it's also firing on orientation change...
EDIT: I've found this, saying it's from android but undocumented : https://issues.apache.org/jira/browse/CB-6154
These events are from Android but are not documented. I've encountered some trouble with this so I recommend not using them.
For information, in order to make my function work, I've done something like this (this is just the general idea):
this._keyboardTimer;
document.addEventListener('showkeyboard', function (e) {
clearTimeout(this._keyboardTimer); // keep only the last event
this._keyboardTimer = setTimeout(function(oldOrientation){
if (oldOrientation != getOrientation()) {
/* this is an orientation event */
} else {
/* keyboard is really opening */
}
}.bind(this, getOrientation()), 200);
}.bind(this), false);
function getOrientation() {
return ( (window.orientation == 90) || (window.orientation == -90) )
? 'landscape'
: 'portrait';
};
And I've done the same thing with the 'hidekeyboard' event. Hope this will help.
[EDIT] There's another problem (yirk!): keyboards may be slightly differents. If the keyboard changes for a smaller: the 'hidekeyboard' event is fired....
Related
Mobile browsers require user action to start play on Audio elements. The click event satisfies the requirement, but it appears that touchstart is not an acceptable initiating event in Chrome on Android or iOS. (See below)
Does anyone know where to find a precise definition of the event context required to start play.
(I was attempting to solve a UX problem using the ideas in How to prevent doubletap zoom in iOS and Android. Since posting my original question, I've found a solution that solves the UX problem without using touchstart, but I think the essential question about which events are considered to be user action is still valid.)
Addendum:
It has been suggested that I am mistaken about touchstart events, so for the record, I am providing a trivial test program. Since it requires a real music file and a mobile device, JSFiddle isn't a suitable platform (unless somebody knows how to simulate a touchstart event in a fiddle). To reproduce my observations, edit the javascript to load your own audio file.
<!DOCTYPE html>
<html>
<body>
<br>
<button type="button" id="but1">click</button>
<button type="button" id="but2">touch</button>
<br>
<br>
<span id="message"></span>
<script>
var e;
e = document.getElementById('but1');
e.onclick = click;
e = document.getElementById('but2');
e.ontouchstart = touchstart;
function click() {
alert('caught click');
play();
event.preventDefault();
}
function touchstart() {
alert('caught touchstart');
play();
event.preventDefault();
}
var p;
var t;
function play() {
p = new Audio();
p.src = '/k487.mp3'; // CHANGE THIS
p.preload = 'auto';
p.play();
t = setInterval(report,1000);
}
function report() {
var s = 'Player readyState='+p.readyState+', currentTime='+p.currentTime;
var e = document.getElementById('message');
e.innerHTML = s;
}
</script>
</body>
</html>
When I load this page in Chrome 58 on Android 6.0.1 the Click button works as expected, producing a popup, playing some music and updating the play time.
If I reload the page and touch the Touch button instead, I get the popup, but no music plays. The status display shows a readyState of 4 and a currentTime of 0. In other words, the touchstart event is permitted to load the audio but not to initiate play.
Since I can find no documentation on what events are meant to work, I don't know whether to consider this a Chrome bug, or intended behaviour.
When the play() method on a media element is invoked, the user agent must run the following steps https://html.spec.whatwg.org/multipage/media.html#dom-media-play
step1: if the media element is not allowed to play...
then I wonder the condition that allowed to play, it jump to here https://html.spec.whatwg.org/multipage/media.html#allowed-to-play
it says:
For example, a user agent could require that playback is triggered by user activation, but an exception could be made to allow playback while mute
then came to 'triggered-by-user-activation' here
I think that's the reason:
An algorithm is triggered by user activation if any of the following conditions is true:
The task in which the algorithm is running is currently processing an activation behavior whose click event's isTrusted attribute is true.
change
click
contextmenu
dblclick
mouseup
pointerup
reset
submit
touchend
'touchstart' is not mentioned there.
hope that helps you.
In this page you will found answer on this question .
Use some popup or any animation nice for eye to attract user for tap .
in my memory ... android and iOS have no same behavior it is about max number of audios that we can start buffer with this trick .
var EXE_JUST_ONE_TIME = false;
document.addEventListener("touchstart" , function(e) {
if (EXE_JUST_ONE_TIME == false){
EXE_JUST_ONE_TIME = true;
document.getElementById("LaserShot").play(); // need for play pause just for buffering start
document.getElementById("LaserShot").pause();
// now you can play programmability from js
document.getElementById("LaserShot_CLONE").play();
document.getElementById("LaserShot_CLONE").pause();
}
else if(EXE_JUST_ONE_TIME = true){
document.getElementById("MakeReadyotherAudio1").play();
document.getElementById("MakeReadyotherAudio1").pause();
EXE_JUST_ONE_TIME = 'NOMORE'
}
}
If you have problems i can make you code snippet with working example !
I put in 90% in mobile web dev in event function on begin :
document.getElementById("myAnchor").addEventListener("click", function(event){
event.preventDefault()
});
//Sometimes even if you dont use some event its good to override :
window.addEventListener('touchstart', function(e){
e.preventDefault()
}, false)
window.addEventListener('touchmove', function(e){
e.preventDefault()
}, false)
window.addEventListener('touchend', function(e){
e.preventDefault()
}, false)
window.addEventListener('touchleave', function(e){
e.preventDefault()
}, false)
window.addEventListener('touchcancel', function(e){
e.preventDefault()
}, false)
window.addEventListener('touchenter', function(e){
e.preventDefault()
}, false)
If you wanna you can use this library :
desktop/mobile event optimise for canvas
Is it possible to use the native "pinch to zoom" on touch devices while using hammerjs to recognize swipe gestures?
I want users to be able to zoom in on images in the gallery (as they can natively when hammer event handler is not bound) and swiping to display the previous or next image.
hammertime.on('swipe', function(ev) {
if (ev.direction === 2) {
nextImage();
} else if (ev.direction === 4) {
prevImage();
}
});
Solution was to use touchAction = 'auto'
var hammertime = new Hammer(galleryEl, {touchAction : 'auto'});
Before doing this be sure to read http://hammerjs.github.io/touch-action/
When you set the touchAction to auto it doesnt prevent any defaults, and Hammer would probably break. You have to call preventDefault manually to fix this. You should only use this if you know what you're doing.
I need to use touch events for touch screens, and mouseevents for regular Desktop for my website using Snap SVG.
I have mouse events like :
_Button.mousedown(function(){
// Do Stuff
});
How can I easily switch to touch events such as 'touchstart' when my user comes from a tablet ?
I don't want to duplicate code, and checks if its a touchscreen, like having 20* times this kind of code :
_Button.mousedown(function(){
// Do Stuff
});
if ( touchSreenFlag === true) {
_Button.mousedown(function(){
// Do Stuff
});
}
Thx
Here we go :
SVGTHING.mouseup(function(e){
if (e.type === 'touchend') {
// Stop propagation : on touch devices the first click will be used and not the second.
e.stopPropagation();
e.preventDefault();
}
do_stuff();
});
I wonder if its possible to prevent double-tap-to-zoom and double-tap-to-center on a specific HTML element in Safari iOS (iPad 1) ?
Because my small HTML5 game forces users to make fast clicks (or taps), which are interpreted as double clicks, and when it happens - the page changes zoom and centers itself.
Detecting double clicks (like in this answer - Safari iPad : prevent zoom on double-tap) smells bad..
Wrong answer #1:
<meta name="viewport" content="width=device-width, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"> - does not suit my purposes, because it will block any zoom.
Wrong answer #2: maybe would .preventDefault() on click event alone be enough for that ? - Does not have any effect.
There's no other way than catching the events you want to prevent, and call preventDefault() on them, as you had already more or less figured out.
Indeed, some particular CSS properties / values may change the global site behavior (fixed width or fixed, for example), but you're not safe from changes to the OS (see fixedhandling change in iOS5), nor do these changes necessarily prevent all behavior (pinch might be off, but not double-tapping).
So, the best way to disable default behavior only for double-tapping is to take advantage of the count of touches iOS provides: if we have only one contact, then we're tapping. Two, this means we're pinching.
The following setup code provides that functionality:
var elm = document.body; // or some selection of the element you want to disable
var catcher = function(evt) {
if (evt.touches.length < 2)
evt.preventDefault();
};
elm.addEventListener('touchstart', catcher, true);
Demo on jsFiddle.
Note: the third parameter (true) to addEventListener means that we want to capture events, that is catch them all, even for our descendant children.
I am preventing doubletaps like this:
var doubleTouchStartTimestamp = 0;
$(document).bind("touchstart", function (event) {
var now = +(new Date());
if (doubleTouchStartTimestamp + 500 > now) {
event.preventDefault();
}
doubleTouchStartTimestamp = now;
});
The elegance lies within the fact, that no timeouts are needed. I only update a timestamp. It only gets compared on the next touchstart. Works for me on iOS 6.
Doubletaps further down the dom are not affected.
The same works without jQuery, as well:
var doubleTouchStartTimestamp = 0;
document.addEventListener("touchstart", function (event) {
var now = +(new Date());
if (doubleTouchStartTimestamp + 500 > now) {
event.preventDefault();
}
doubleTouchStartTimestamp = now;
});
I wrote a jQuery plugin for the same purpose - selectively disabling double-tap zoom on given page elements (in my case, navigation buttons to flip pages) I want to respond to every tap (including double-tap) as a normal click event, with no iOS "touch magic", no matter how fast the user clicks it.
To use it, just run something like $('.prev,.next').nodoubletapzoom(); on the elements you care for. The principle it uses is to listen for consecutive touchstart events on a node within 500ms, and running event.preventDefault() on the second, unless other touches are active at the same time. As that preventDefault consumes both touches, we also synthesize the two "missed" click events for the node, so your intended touch action happens as many times as the user intended.
Apple has a lot of tips with specialized tags for webkit (Safari). View Official Docs
What iOS version/Safari browser are you using? That site most definitely does not let you double-tap. I found some CSS but haven't had time to try it as I'm about to step out:
body {
-webkit-text-size-adjust:none;
margin:0px;
}
div{
clear:both!important;
display:block!important;
width:100%!important;
float:none!important;
margin:0!important;
padding:0!important;
}
You will need to implement a double tap function and preventDefault on the second tap. Here is some tested code that uses global variables that should get you started:
<button id="test1">Double Tap Me!</button>
<div id="test2">EMPTY</div>
var elm1 = document.getElementById('test1');
var elm2 = document.getElementById('test2');
var timeout;
var lastTap = 0;
elm1.addEventListener('touchend', function(event) {
var currentTime = new Date().getTime();
var tapLength = currentTime - lastTap;
clearTimeout(timeout);
if (tapLength < 500 && tapLength > 0) {
elm2.innerHTML = 'Double Tap';
event.preventDefault();
} else {
elm2.innerHTML = 'Single Tap';
timeout = setTimeout(function() {
elm2.innerHTML = 'Single Tap (timeout)';
clearTimeout(timeout);
}, 500);
}
lastTap = currentTime;
});
And a fiddle: http://jsfiddle.net/brettwp/J4djY/
JQuery approach to disable Double Tap Zoom in MVC4
To Disable the double tap (double mouse down) functionality on iOS 1+ you need to catch the touchStart Event and create an override to prevent the zoom.
// Using Single script.js and JQuery.Mobile-1.2.0 UI each page in MVC gets assigned JQuery through delegates so you don't have to do a full refresh of the page allowing you to take advantage of the data-prefetch which loads the page in the DOM when the app loads for the first time
$(document).delegate("#CashRegister", "pageinit", function () {
// To Disable 'Pinch to Zoom' Note: don't implement gester event handlers if you want to
//keep pinch to zoom functionality NOTE: i use this as my pageinit is a delegate of a page
this.addEventListener("gesturestart", gestureStart, false);
this.addEventListener("gesturechange", gestureChange, false);
this.addEventListener("gestureend", gestureEnd, false);
//handle each event by disabling the defaults
function gestureStart(event) {
event.preventDefault();
}
function gestureChange(event) {
event.preventDefault();
}
function gestureEnd(event) {
event.preventDefault();
}
//Recreate Double Tap and preventDefault on it
$(this).bind('touchstart', function preventZoom(e) {
// recreate the double tab functionality
var t2 = e.timeStamp
, t1 = $(this).data('lastTouch') || t2
, dt = t2 - t1
, fingers = e.originalEvent.touches.length;
$(this).data('lastTouch', t2);
if (!dt || dt > 500 || fingers > 1) return; // not double-tap
e.preventDefault(); // double tap - prevent the zoom
// also synthesize click events we just swallowed up
$(this).trigger('click').trigger('click');
});
Actually, .preventDefault() definitely does work... using jQuery:
var InputHandler = {
startEventType : isTouch ? "touchstart" : "mousedown"
}
$(selector).bind(InputHandler.startEventType, function(evnt) {
evnt.preventDefault();
});
Your problem with trying to prevent on .click() is that the browser isn't throwing a "click" element. Safari only fires a click to help simulate a click... But when there's a double tab, Safair doesn't through a "click" element. Your event handler for .click() doesn't ever fire, and therefore the .preventDefault() doesn't fire either.
Is it possible to handle such events as:
Ctrl + mouse left button click;
Shift + mouse left button click;
Alt + mouse left button click
by using JavaScript, jQuery or other framework.
If it is possible, please give a code example for it.
You can do something like this (jQuery for the click handler, but any framework works on the part that matters):
$(selector).click(function(e) {
if(e.shiftKey) {
//Shift-Click
}
if(e.ctrlKey) {
//Ctrl+Click
}
if(e.altKey) {
//Alt+Click
}
});
Just handle whichever you want inside an if inside the click handler like I have above.
If you use JQuery plugin called hotkeys you can handle the special keys below.
$(document).bind('keydown', 'Ctrl+c', fn);
More recently I encountered a problem with using e.ctrlKey in that, it does not work on MACs.
In a Macintosh, the same effect is achieved using Command+Click.
Since most of the answers above are already assuming usage of jQuery, you can simply use the e.metaKey property which is made available by jQuery.
e.g.
$(selector).click(function(e) {
if(e.shiftKey) {
//Shift-Click
}
if(e.metaKey) {
//Ctrl+Click on Windows & Command+Click on Mac.
}
if(e.altKey) {
//Alt+Click
}
});