Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Can I open the OS native emoji picker in a web page?

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 CTRLSpace), 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.

like image 867
bemontibeller Avatar asked Mar 08 '19 16:03

bemontibeller


People also ask

What is emoji picker?

emoji-picker-element is a lightweight emoji picker for the modern web. Search When search results are available, press up or down to select and enter to choose.

How do you use emoji Mart?

How Do I Use It? You simply use the Picker component and add a listener function to the onSelect event prop to get the selected emoji and after that, you can do many things with the returned object, like getting the “native” emoji or similar things.


1 Answers

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. keyboard event flow

like image 179
hackape Avatar answered Sep 17 '22 12:09

hackape