JSFiddle - React, Tailwind, and code Playground

by bitstarr

HTML

<form>
<input name="email" type="email" id="mail" placeholder="E-Mail Address" required />
</form>

CSS

body { margin: 3em; font: 1em/1.5 sans-serif; }

JavaScript

$( '#mail' ).on({
    keydown: function(e)
    {
        var self = this;
        // if the typed character was typed while AltGr is hold
        // and it has not produced an @
        // and it's no a control key
        // we add the typed character to the input
        
        console.log(e);
        
        if (e.altKey && e.ctrlKey && e.key !== '@' && e.keyCode > 47 ) {
            var key = String.fromCharCode(e.keyCode).toLowerCase();
            self.value = self.value+key;
        }
    }
});