JS API to trigger the platform native emoji picker

There was a previous discussion here: Invoke emoji input but it focused on changing the input elements.

What I’m thinking of is, have a simple API call that would open the native emoji picker, in response to a click event.

Chrome already exposes a way of opening the emoji picker by having an emoji option in the context menu on inputs. https://9to5google.com/2018/04/05/google-chrome-emoji-shortcut-mac-windows/

With how complicated the emoji/unicode has gotten, especially in last couple of years, it seems like a great idea to delegate this job to the operating system, rather than having to implement it in javascript yourself, which requires a big amount of data with the emoji data/information.


I would suggest to add a simple emoji attribute on input and textarea instead of providing a complex API.

For example:

<input type="text" required emoji></input>

When the attribute is present, then there is a small icon to select emoji… like Emojionearea.

With an attribute I’m worried it will hard to style whatever button the browser ends up adding. And it will be even harder to move outside the input if needed (for example the smiley/emoji button on discourse here).

I don’t know about other OSs, but on MacOS at least, it’s a simple keyboard combination to bring up the emoji selector… I guess if you wanted to show a restricted set, you could still just make a custom UI using the array of emojis to display. This really seems like a job for Web Components, to be honest.

Not everyone is aware of the keyboard combination (especially on Windows when it was just added recently), it’s also helpful on mobile where it would open the emoji panel directly.

Making a custom UI is specifically what I mentioned in the initial post already. There’s many emojis, and to make an effective searchable emoji panel, you need to have a lot of metadata about emojis, which gets even bigger when you consider modifiers.

That won’t work for applications like Twitter and Facebook, who already have a button for explicit emoji input. A lot of places do just that on desktop where there’s no obvious “input emoji” key/button, so they can still easily add one in if they don’t know the keyboard shortcut.