How to prevent emoji shortcuts

Question

I am having issues preventing the browser from creating emojis inside of 'textarea' and 'input' elements, by triggering shortcuts like 'alt + 1', 'alt + 2'.

This code prohibits any interaction with said elements, but 'alt + 1' still creates smileys. Tested on Chrome and Edge. Am I missing something?

'use strict';
(() => {
  document.onkeydown = document.onkeypress = document.onkeyup = ev => {
    ev.stopPropagation();
    ev.preventDefault();
    return false;
  }
})();

https://jsfiddle.net/9Lr0hays/1/

Note: I don't want to interact with the elements directly (using selectors).

I am talking about these symbols: http://www.alt-codes.net/

Related: Disable Alt Codes/Characters with JavaScript

It doesn't create anything in my chrome browser... nor IE or Firefox — Herr Derb, May 09 '17 at 08:14

XIMRX · Answer 1 · 2017-05-09T09:00:21.363

1

One possible solution to this problem is check key codes.

<input type="text" id="number" onkeypress="return iskey(event);" />
<script>
function iskey(evt) {
    var theEvent = evt || window.event;
    var theVal = theEvent.target.value;
    var key = theEvent.keyCode || theEvent.which;

    key = String.fromCharCode(key);

    if (key.length == 0) return;
        if (theEvent.preventDefault) theEvent.preventDefault();
        return false;
}
</script>

Working here: https://jsfiddle.net/1569atLz/23/

edited May 09 '17 at 09:00

answered May 09 '17 at 08:35

XIMRX

2,130
3
29
60

This does not seem to work. Also: ReturnValue is non-standard and deprecated. https://developer.mozilla.org/en-US/docs/Web/API/Event/returnValue – Christoph Bühler May 09 '17 at 08:37
Yes because it also handels window.event and we ignore double keys when key.length is 0 – XIMRX May 09 '17 at 09:09
Could you please update the answer, using no direct selectors (as stated in the question)? – Christoph Bühler May 09 '17 at 09:11
Thanks for your efforts, you helped me find out what I did wrong (see answer below). – Christoph Bühler May 09 '17 at 09:18

score 0 · Accepted Answer · answered May 09 '17 at 09:17

0

Very bad mistake. I wrote document.keypress instead of document.onkeypress in the fiddle (the snippet was correct).

Working solution:

'use strict';
(() => {
  document.onkeypress = ev => false;
})();

https://jsfiddle.net/9Lr0hays/3/

answered May 09 '17 at 09:17

Christoph Bühler

2,795
2
28
43

How to prevent emoji shortcuts

2 Answers2