CODEWITHSUNDEEP
javascript
Andrew Rusinas
Andrew Rusinas

Reputation: 1064

How to preventDefault() textInput event?

I have a textarea on my page. If user on Windows (not sure about Mac behavior though) will open built-in Emoji menu (Win + .) in that textarea and click on any emoji, the textInput event will be fired. I need to, somehow, prevent default behavior for this event, which is inserting an emoji to the input, and resolve emoji insertion on my side. However, event.preventDefault() doesn't work in this case. Any ideas?

Upvotes: 0

Views: 118

Answers (1)

mplungjan
mplungjan

Reputation: 177685

I do not think you can handle the emoji interface using preventDefault.

We cannot detect the combination of event.key==="Meta" and "."

Here is how to handle it after the fact:

const re = /\p{Emoji}|\p{Emoji_Presentation}|\p{Extended_Pictographic}/ug; // can be extended
document.getElementById('myField').addEventListener('input', function(e) {
  const val = this.value;
  this.value = val.replace(re,"");
})
<textarea id="myField"></textarea>

the script above is from combining the information from the answers below

Upvotes: 1

Related Questions