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.

5 Likes

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.

Hey there,

I came through a same issue and as far as I can see there is no JS API for this so far, even though chrome seems is able to “open” this native emoji picker.

I do not think we need a <input emoji /> attribute, but what would be great is to have a simple API like

navigator.EmojiPicker.open()

or something like this. Is anyone still interested in this topic? Maybe suggesting it to the ECMAScript Team or something.

That won’t work for applications like Twitter and Facebook, who already have a button for explicit emoji input.

My solution would work in that case… If they really want to use their custom input for emoji, they can simply avoid to add the emoji attribute to the input.

I do not think we need a <input emoji /> attribute

I think that the HTML attribute would be straightforward and would cover 99% of use cases. Usually you need to add an emoji to an input field, not somewhere else. In any case also a JS method would help.

I hope that Chrome and others will consider this feature, because it would be easy to implement (i.e. it’s simple for them to open the native OS picker) and it would save a lot of a headaches to developers.

I also have another concern with the JS API solution: what about the position of the cursor in the textarea? When you click on the :grinning: button to open the emoji selection you lose the focus / position of the input in the textarea.

There are OS pickers on all major platforms:

  • MacOs: Cmd+Ctrl+space
  • Windows: Windows+.
  • Ubuntu: Ctrl+.
  • etc.

The problem is that most users don’t know about those strange key combinations… It should be simple to open that native picker for the browser.