How to handle Samsung S-Pen button event in the browser (Javascript)? - javascript

I'm developing a web app for the Galaxy Tab S3 that allows the user to draw with a Samsung S-Pen. The S-Pen has a button on the side which I know can be used by native Android applications to perform various functions. However, I am having a hard time figuring out how to identify which event gets fired in the browser when this button is pressed (or even if an event is fired?).
I have tried out all of the PointerEvents and TouchEvents and I tried identifying an event here: https://patrickhlauke.github.io/touch/
I also found nothing in the S-Pen SDK:
https://developer.samsung.com/galaxy-spen-remote/overview.html
And unfortunately this post was removed:
https://stackoverflow.com/questions/51489489/detecting-pen-stylus-button-events-in-javascript
Does anybody know the name of the event or where I can figure this out?

Related

Disable Chrome mobile's "tap to search" on a web app

I would like to be able to disable, through JavaScript or some sort of HTML meta-tag, the tap-to-search/touch-to-search feature found on mobile Chrome which shows a banner at the bottom of the browser every time the user long presses/taps on a word in any text paragraph.
This Chrome feature is a problem for me because this contextual banner completely covers the toolbar in the web app that I am developing, which is fixed at the bottom of the page.
I've only found this question from 2015 which references this Google Developers article (also from 2015), but the proposed solutions do not seem to work anymore except CSS "user-select: none"; unfortunately, disabling user selection is not a solution for me since user selection is required for my web app to work.
I have also tried setting event.preventDefault() when the "oncontextmenu" event fires, which does disable the search toolbar when the user taps on a word, but not when a user long presses on a word, as far as I have experienced.
So far the only partial "solution" that has worked for me has been to install the web app: as an installed PWA, tap-to-search does not somehow trigger. It still annoys me a lot that I would have to basically beg my potential users to install the web app on mobile.
I also know that the user can manually disable this feature globally in the Chrome Flags, but this is, I imagine, really annoying for a potential user as well.
Is there anything I am missing here? Do you know of any way to prevent tap-to-search from firing on a long press?
Adding the attribute tabindex="-1" to the <body> tag works for me.
As of 2021, it isn't possible to disable touch-to-search (when this is triggered by a long-press for text selection) in chrome mobile. The Google Developers article is apparently concerned only with touch-to-search triggered through a tap gesture.
Quoting donnd, from bugs.chromium.org:
Regarding #2 -- developer control: The 2015 article that you mentioned (https://developers.google.com/web/updates/2015/10/tap-to-search) focuses on triggering through the tap gesture. As you correctly point out, it does not address the long-press gesture triggering. Touch to Search responds to both tap and long-press but treats them differently. As I'm sure you know, the long-press gesture activates a whole set of features which can include copy, translation, smart text selection, and Web Search. A site developer can markup their page text as non-selectable in order to disable the long-press gesture entirely, but currently there's no way to disable only the Touch to Search response to long pressing. If you'd like to work with us to add such a feature, let us know and we'll file a separate feature request.

How to catch global key (MediaPlayPause) when window is unfocused (like Youtube does it)

Question:
How to listen to MediaPlayPause keyboard event in unfocused tab.
Background:
I recently noticed that Youtube is able to Play/Pause the video when I press the Play/Pause Media button on the keyboard, even when the browser tab/window is not in focus.
This seems to only work in Chrome (I've tested in Chrome 74 on Windows 10), so there must be some Chrome-specific API method they're using to make it work, since keyboard events generally can't be accessed when the tab isn't in focus.
I'd like to achieve a similar functionality in a web-app, but can't figure out how. Therefore I ask of the greater collective if anyone knows how this is achieved?

SoundJs with Angular on Mobile

I am trying to make SoundJS work with angular on mobile devices. The problem is that mobile devices require the sound to be played in direct response to a touch event. However in SoundJS, when user selects a song to play, it has to get loaded first and then gets played when the loadComplete handler is called. SoundJS folks suggest a hack-ish way by launching the entire application (the JavaScript code) from a touch event
http://www.createjs.com/tutorials/Mobile%20Safe%20Approach/
However, i have no idea how to make this work with angular. Has anyone figured this out ?

Javascript touchend event will not fire on Android

I'm trying to use the touchend (or the taphold event, both wont fire) as specified by jquery mobile. I'm developping an app for android using the phonegap platform. My AVD runs Android 4.0.3, and my phonegap version is 1.3.0.
As im using phonegap, i'm coding in javascript, and the objective is to recuperate the text selected by the user after a longpress on a word with the following code.
var selectAction = function(){
LOGGER.log('event.js : selectAction');
};
function selectMobile(component){
component.addEventListener('touchend',selectAction,false);
}
It actually works fine, if I tap relatively quickly, the event will fire up and I can get the log message. However, a rapid touch will not select text (I have more code taking the selected text but this is not the issue)
When a user long presses in Android, a default ''Action Menu'' pops up, and this seems to block further events from firing up. Because of that, I never get into my selectAction when actual text is selected.
Does anybody know how to properly get selected text in an html/javascript on an Android platform ?
Thank you very much.
It's could be related to below bug.
http://code.google.com/p/android/issues/detail?id=19827
try catch touchmove and call e.preventDefault()

Set keyboard to stay open even on "go" press with html5/javascript?

I'm building a small html5 web-app to hone my html5 skills. I've built the project and it works pretty good, but I want to enable some mobile functionality which should make it even cooler! One of the annoyances of using the site on mobile is that whenever you press the "go" button on the android keyboard after entering data into a textbox, it hides its self, despite the fact that in javascript I've specified that the textbox still has focus. Is there a way to explicitly tell the android browser to keep the keyboard open?
Thanks,
John
I think this is beyond the realms of JS - The keyboard is part of android, and thus (I assume) would be up to the browser to decide whether the keyboard stays or not - how would you cope for different browsers running across android?
Because I would assume they're not all running Webkit (Firefox mobile?).
So I think the answer is it can't be done :(

Categories