Javascrit keypress event does not work on mobile

Question

The Javascript code below, which serves to "bar" character > (asc 60) only works on desktop devices and not on mobile devices.

<textarea name='notes' id='ta' wrap='physical' cols='65' rows='8' style='width: 80%;' tabindex='14'></textarea>

<script>
var ta = document.getElementById("ta");
ta.addEventListener('keypress',
    function (e) {
       if (e.keyCode == 60) {
           alert('N\u00e3o use <');
           e.preventDefault();
       }
    }
);
</script>

Answer 1

beforeinput
Inputevent.data

var ta = document.getElementById('ta');
ta.addEventListener('beforeinput', evt => {
    if (evt.inputType === 'insertText' && evt.data.charCodeAt(0) === 60) {
        alert('N\u00e3o use <');
        evt.preventDefault();
    }
});

<textarea name='notes' id='ta' wrap='hard' cols='65' rows='8' style='width: 80%;' tabindex='14' onpaste='return(false)'></textarea>

var ta = document.getElementById('ta');
ta.addEventListener(window.TextEvent && 'name' in window.TextEvent ? 'textInput' : 'keypress',
    function (evt) {
        if ((evt.which || evt.data.charCodeAt(0)) === 60) {
            alert('N\u00e3o use <');
            evt.preventDefault();
        }
    }, false);

<textarea name='notes' id='ta' wrap='hard' cols='65' rows='8' style='width: 80%;' tabindex='14' onpaste='return(false)'></textarea>

https://www.outsystems.com/blog/posts/create-input-mask-for-mobile/

Answer 2

var ta = document.getElementById("ta");
ta.onkeydown = (e) => {
       const keyCode = e.which || e.keyCode;
       if (keyCode === 188 ) {
           alert('N\u00e3o use <');
           e.preventDefault();
       }
    }

<textarea name='notes' id='ta' wrap='physical' cols='65' rows='8' style='width: 80%;' tabindex='14'></textarea>

The problem is with event Keypress

This is because, certainly there is some problem with the event keypress in the Android browser (ie Chrome for mobile). Try replacing it with the event keydown, this usually works well.