React trigger event through mouse click on span [duplicate] - javascript

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.

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 detect the presence of a hardware back button from a webapp with javascript

I've seen multiple questions regarding how to check the presence of a back button in Android, but they all seem to be geared towards apps in Android, which I don't believe would help here.
I want to determine the need to show a back button in a webapp that will be run across multiple OS's, and I know with javascript you can check what OS the device is, which answers the need to show or not show a back button for iOS, or Windows Phone, but with Android, since there's many different button set ups, I would like to be able to check the presence of either a software back button (like an LG, OnePlus One or something) or a hardware back button you would see on most other devices with hardware buttons. I can't seem to find an answer in my searches, and if it's not possible, that's fine, I just want to ask and be sure. Again, any answers need to be relevant to javascript solutions. If there are any useful libraries or tools I can integrate in with the javascript, (i.e. something in angular, jquery, etc. then I'm happy to entertain those solutions as well).

Trigger System-wide Keyboard Events from a Javascript Chrome App

Is there a way to trigger a system-wide keyboard event (i.e. emulate an actual key being physically pressed) from a Javascript Chrome App?
Currently I've got
target.dispatchEvent(new KeyboardEvent(..));
but this can only be invoked on a target element within the browser.
Ultimately, I want to be able to have a callback
function typeLetter(character){ }
that will type a letter character whether Chrome is the active window or not.
Any suggestions greatly welcomed!
I'm pretty sure this won't be possible between different applications. Even between browser tabs would be an issue I think. If it were possible there would be plenty of security issues that come with it.
Emulating key presses anywhere except the currently-running application (chrome) would open up a can of worms in regards to cross-site scripting attacks and key-logging hacks.

Regarding chrome fullscreen message disable

I need to disable fullscreen message ("you've gone fullscreen") coming on the top when chrome fullscreen mode is activated .
i need to do it through javascript . but it's one of the default functionality of chrome.
can any one help me out ?
It's not possible. As you pointed you it's one of the default functionality of chrome.
and I agree with the comment by mic You can't it's there for security
That message is, if you it can be disabled at all, likely a user preference. I have had my fair share of changing that kind of things for a custom "layer" over windows with an integrated browser and I can tell you it's impossible with javascript without some listener app. We created a C# listener app for that kind of thing that keeps checking a certain text file. We made javascript edit the text file and then let C# work it's hacking magic in some of the user's settings.
You could take a look at Chromium, the stripped down version of Chrome, if that would be of any help ;)
ps: To all the people going mental over changing user settings like that, our customers were old people that were unable to use a computer, and our application's purpose was to do as much as possible for them.
You cannot possibly do that as suggested by these links.
https://superuser.com/questions/398945/disable-the-youve-gone-full-screen-notification-in-chrome
https://groups.google.com/forum/#!topic/chromebook-central/h1crbhOy-7U
On the other note, why exactly would you want to do that?

bypassing mouseover events for iOS

Our website makes use of the overLIB library to show "more information" about clickable links on mouseover. The result is that on iOS devices, the first click will result in the mouseover text appearing, while the second will activate the link.
What is the easiest way to keep the mouseover text for non-iOS browsers, while bypassing it for users using iOS, so that for iOS, the links are activated on the first click?
If you want an easy solution, you can use something like Modernizr as described here: What's the best way to detect a 'touch screen' device using JavaScript?. Then, you can bind your overLIB events to the non-touch classes, etc. This way, you can address all touch device users and not just iOS users. Of course, if you want just iOS users, you can always UA sniff ( http://www.quirksmode.org/js/detect.html ), though its not recommended.
However, you then still have the problem that you're loading the overLIB script(s) for users who don't need it. I think the best way to avoid this depends on the rest of your stack.
Another thing to think about is the purpose of the hover tips. If they are useful on your desktop site for helping users to learn about where they're going without making the investment of a click, why aren't they useful on your touch device site? I know that hover is clunky on touch devices, but I think they're common enough since there's no alternative yet. I'd bet that touch device users understand the flow. The only example that comes to mind is Seamless.com - when you select a menu item from a restaurant, you get a "hover" description and then it requires a second click to select the item.
I realize that this is an old question - answering for the Googlers. :)
Another solution is to use .mousemove() instead of .mouseover().
iOS ignores the .mousemove() event and triggers a click on the first touch.

Categories