How to detect mouse click and hold in Android browser? - javascript

I am writing a webpage that is intended to be viewed on Android phones and hopefully other mobile devices. I am going with a webpage as opposed to an App because it is more platform independent.
I would like to perform an operation continuously while the uses is clicking and holding a button on the webpage. On mobile device the operation would run continuously when they hold their finger on the button on the webpage.
I have tried using the javascript function setInterval() on the onmousedown event of my input button and clearInterval() on the onmouseup event. This works perfectly when accessing the device from any browser on a PC. Unfortunately, it doesn't work on my Android phone. The button appearance does seem to change to the held state when pressed and held but the onmousedown event doesn't get called.
Has anyone found a good way to do press-and-hold button actions that is compatible with Android devices?

Check here:
What DOM events are available to WebKit on Android?
and here:
Quirksmode.org/mobile
Seems that you need to use some of the DOM or touch handlers (last one may have problems when using trackbal)

Related

Trigger Keyboard Event Combination Shift+Q

I am very confuse and not sure either javascript or jquery can trigger keyboard event like Shift+Q or Alt+Q from button click. I already looking on this forum and also download some of js file like key-event.js and crossBrowser_initKeyboardEvent.js but I still cannot get a result what I want.
My situation is I need to trigger ALT+q key from button html. This should be automatically proceed and will be effect not only inside html(browser) but also on desktop client.
Thanks you.
The effects of keyboard and mouse events fired by Javascript within a web pages are limited to the contents of those web pages. These events cannot reach outside of the web page to trigger keyboard shortcuts in the browser or desktop.

jQuery - Allow Autoshow Keyboard on Mobile

I have a Rails app that has a closed back-end. On certain pages, I want to auto-select a text input so I can use an external bluetooth scanner to scan a barcode without selecting it with a mouse/touchscreen every time. This works perfectly on non-mobile devices. However, on mobile devices (mostly tablets), I want the keyboard to popup (as the scanners are viewed as "keyboards" by the system). I know this is prevented by iOS, because it could be annoying. However, I want to know:
Can I have the keyboard auto-appear on Android and/or Windows tablets?
On iOS, can I change this default behavior so the keyboard DOES auto-appear? I have access to all the devices this behavior would be needed.
Edit: I know that I can use a click event to make the keyboard appear (that is how it appears now). However, I do not want to touch the tablet every time I want to scan.
There are some workarounds except using great prompt().
Wrap the web application into Phonegap and do the following way.
Keeping in mind that bluetooth scanner needs a first click to enable listening to keyboard events, you can slightly change js-code to perform first click manually (say, fullscreen textarea) and then deal with scanner. It can be a textarea that hides right after a first click and everything is done with javascript without textarea in view.
Looks like Windows smartphones can help you, can't find any issue concerning a problem.
I've tested autofocus fiddle in Chrome56 with Windows 8.1, Windows10 and an old Windows Mobile 8.1 at Nokia Lumia. In first two cases it does listen to keyboard after focusing. The latter one doesn't.
Bonus. HTC One M8 emulator with Android 4.4 listens to keyboard without a click. Tested with browserstack service. What if there are some android examples without need to click?
Bonus2 - autodetect scanner library.
Based on thoses answers you have to try some workarounds
You can't, at least not in iOS (iPhone), and I believe Android as well. It's a usability issue that the keyboard should not be allowed to be triggered except by user input (it's just annoying if it's automatic).
There are a couple of ways I know of to get around this:
prompt() opens the keyboard
If you trigger the .focus() from within a .click() event (e.g. from >opening your dialog), the keyboard shows up
In your case at the openning of your page ?
At least maybe this JS fiddle can help you or this one
You can use JavaScript in built functions for event handling such as focus(), prompt() to initiate bar code scanning function. Also changing some of the usability would also be helpful in this case. For building hybrid apps try some reading on Cordova Keyboard Plugin at https://github.com/cjpearson/cordova-plugin-keyboard
Happy Coding.
try below code. It might work
// div is some selected element
var f = function(event) {
$timeout(function() { // angular way, setTimeout is OK
input[0].focus();
event.preventDefault();
})
};
var mobile = false;
div.on('click', function(event) {
if(mobile) return;
f(event);
});
div.on('touchstart', function(event) {
mobile = true;
f(event);
});
div.on('touchend', function(event) {
event.preventDefault();
event.stopPropagation();
});
My best bet is using offsite input and focusing there. It will help you to control -
the timing of keyboard appearance(setTimeOut)
Check and reopen the keyboard
You will need to do something like this-
<input type="text" style="visibility: hidden; position: fixed; left: -200px" >
With jQuery-
$("#theOffViewBox").focus();
This will work equally on iOS/Android/Windows/Linux as being base JavaScript jugad.

Deprecated touch operations on mobile apps

In past mobile apps that I developed, I found that the click event did not work as expected in all devices (for example: in games in which the user had to tap/click quickly on the screen, instead of triggering the click event, the double click was triggered), and using touchstart gave better results for what I wanted.
Since then, I started listening to the touchstart event instead of click; but testing on Chrome, I got the following warning message in the JS console:
Performing operations that require explicit user interaction on touchstart events is deprecated and will be removed in M54, around October 2016. See https://www.chromestatus.com/features/5649871251963904 for more details.
I visited the linked page (and the links inside it) and it seems that this new behavior is to avoid certain unwanted actions, and in particular to avoid third-party iframes or ads (my app has none) from opening pop-ups. I tried changing the event to touchend (as one of the links stated "The touchend event will continue to behave as before"), but got a similar warning message.
And my questions:
Is this something that only affects Chrome, or will it affect my web apps (with Cordova/Phonegap) for Android and iOS?
What event should I use to replace touchstart and avoid the issues I faced in the past? I could go back to click, but fast clicking/tapping would still be a problem.
When creating Cordova app, you target different OS versions, Android 5 and up has auto updating webview based on Chromium, so that problem will probably affect your apps.
But since Chrome 32, when using this viewport <meta name="viewport" content="width=device-width">, the click delay should go away (see this article), so you could safely use click event. Latest webviews on android 5 and 6 are based on Chromium 52.
You can also use fastclick library that will "fix" the click delay only where it's necessary

Add Event Listener to buttons "Back, Start, Search" on Windows Phone

I try to listen if the user is pressing one of the buttons: Back, Start or Search (<- not available anymore) , on a Windows Phone, and simply output an alert if this is the case
e.g. alert("user pressed start");
Is this possible?
I'm trying to find out if the user is about to close the browser and execute a function before he does. On desktop browsers this is easily done with onbeforeunload, but this does not seem to work on mobile browsers.
Those are hardware buttons, handled by the OS, not your website, so no, You can't do that.
Look at this answer: Bind to mobile device hardware buttons
Basically if you make an hybrid app with a framework such as Cordova Phonegap you can bind an event listeners to physical buttons.
You can receive key events for the back button and the camera button.
as you see here : https://msdn.microsoft.com/library/windows/apps/jj207557 .
Some help:
(How can i receive the hardware key button event On Windows phone 8?)
By the way, i think isn't worth the trouble.
These keys are intended for exclusive use of the OS and you won't have any real benefit for your app by hacking that behaviour.

javascript detect if iphone browser closes

I'm trying to detect if on ios (or any other mobile device for that matter) goes into background mode.
onblur doesn't seem to fire.
I was just wondering if there was another method I could use.
Cheers

Categories

Resources