I'm trying to manage and replicate the input coming in from a keyboard using JavaScript. This is trivial except when it comes to IME style keyboards that are the default for Android phones and Chrome OS tablets (or foreign language input). While I've mostly been successful in replicating the input generated from composition events there is one major snag: the keyboard cache.
On Android and Chrome OS when a user is typing into a text area the keyboard remembers what was recently typed and will use it to prefill the composition when the user backspaces. This is very detrimental to my objectives as it makes it hard for me to replicate the behavior without having to maintain my own version of the cache. I've been able to clear the cache on Android by using textarea.blur(); textarea.focus(); but this is not ideal and doesn't work on Chrome OS. Does anyone know what can be done about the keyboard cache from a JavaScript perspective?
Related
I know there are lots of javascript plugins and libraries to allow users to pick emojis for text inputs, but windows and mac already have native emoji pickers (⊞ Win. or CTRL⌘Space), Is there a way for me to open these native emoji pickers when a user clicks in a text field instead of installing plugins in my website?
I already tried emulate button key press, but it didn't work at all.
Short answer is no.
In order to access any OS feature from javascript, you need a corresponding browser API to support.
AFAIK, there isn't an API for that. There's a discussion here which suggests adding <input emoji /> to standard but seems no traction gained.
Edit: Below is my original answer, revised. Comments pointed out I was focusing on the wrong aspect of the question, I totally agree.
However, the OP obviously has some wrong idea about what you can do in javascript to leverage browser ability. So I think it's still worth clarification.
You can't send arbitrary emulated keyboard event from js and hoping the OS will respond. Were it possible, it'd be a severe security issue on browser's part. Imagine open a website and it fires a series of keyboard event to your OS and wipes out your desktop (totally feasible through shortcuts).
You need to understand the runtime env inside the browser is basically isolated from the one of native OS. Whatever OS feature that's accessible to your javascript is totally up for browser vendors to decide. For security reason, they are super careful in making these decisions.
Also, make a distinction on "what browser can do", and "what browser allows you to do in js". Seeing Chrome has an "Emoji & Symbols" context menu item, doesn't necessarily mean it decides to grant you the same ability in js.
To further clarify why the emulated keyboard event is fundamentally different from the native one, I include a graph here. The blue arrow is how emulated keyboard event flows. The farthest place it can reach is the browser's internal event bus. It never got a chance to reach the OS event bus, so no way to notify native emoji picker.
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.
we're developing a WebView based application. Since recent update of "Android System Webview" (v. 59.0.3071.125) the soft keyboard has strange behaviors.
It opens/closes slower when hopping between input controls
the soft keyboard even sometimes dissapearing for a while (when given a ENTER to go to the next input control)
the keyboard looks like to be stopped working at all, it is visible but it look s like not 'linked' anymore to the active input control (while the cursor is blinking in the input control)
All this was working well using "Android System WebView version 45.0.2425.95
but not anymore. New device cannot be downgraded.
Does anybody has a solution to:
keep the keyboard connect to the webview's active input control
faster showing the keyboard popup
thanks in advance
I had similar problems so i side-loaded earlier version of Android System WebView.
Please try uninstalling updates to Android System WebView from Settings->Apps->Android System WebView
And install earlier version like 55 from https://www.apkmirror.com/apk/google-inc/android-system-webview/android-system-webview-55-0-2883-91-release/
until further update comes to Android System WebView which rectifies the said problem.
I have a website where editors write articles using a custom built CMS. Once done they generally test these articles on desktop, but not mobile. To fix this I was wondering if there is an easy way to launch chrome using html/javascript such that I can provide it a url and one of the device emulators? (Keep in mind these are non tech people, and would be easily confused if I asked them to emulate themselves). If thats not possible then launch chrome in a new tab with specific width and height (which matches a mobile device)? Also if possible I would prefer these new windows to be incognito so that I do not save cookies in their sessions. Is there any way to do this? Any ideas would be appreciated. Thanks for reading
Chrome Provides Device Emulator as shown in below screenshot. by pressing the f12 ( Developers tool ) you can find the option. by selecting that "Device Emulator" Icon. You can choose the device as shown in below screenshot and change the device Os and device type and resolution and Orientation.
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 :(