I'm trying to create a shortcut using the bo alt+i, which normally types a dead key ˆ, I tried the following:

$(document).ready(function () {
    $("#txtInput").keydown(
       function (event) {
           if (event.which == 229 && event.altKey === true) {
               alert(event);
               event.preventDefault();
               event.stopPropagation();
           }
       }
   ); 
});

<script src=".7.1/jquery.min.js"></script>
<input id="txtInput" type="text" />

I'm trying to create a shortcut using the bo alt+i, which normally types a dead key ˆ, I tried the following:

$(document).ready(function () {
    $("#txtInput").keydown(
       function (event) {
           if (event.which == 229 && event.altKey === true) {
               alert(event);
               event.preventDefault();
               event.stopPropagation();
           }
       }
   ); 
});

<script src="https://cdnjs.cloudflare./ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<input id="txtInput" type="text" />

The code inside the condition executes, but ˆ is still typed in my "#txtInput". Is it possible to prevent this text from being typed?

• javascript
• jquery
• jquery-events

• Added an answer. – Aaron Commented Apr 16, 2020 at 17:09

4 Answers 4

Came across this post while searching a way to prevent a Dead key (like ' used in a bination to get special characters, e.g. ā, ē, ī, etc) from being entered in to a text input on MacOS

None of the solutions out there worked as OP mentioned - they were unable to prevent the Browser/OS from starting the character bination

One hacky way I found to do it is to blur the input on Dead keypress and then focus it back again after an insignificant delay. In my case this causes less flickering than removing the entered symbols after the fact by manipulating the event.target.value

const input = document.getElementById('input')

input.addEventListener('keydown', e => {
  console.log(e.key)

  if (e.key === 'Dead') {
    input.blur()
    setTimeout(() => input.focus())
  }
})

<input id="input" type="text">

This will also prevent the next special character that ' transforms to from appearing in the input

This is very keyboard layout-specific, and this maybe is not a generic solution, but you could do something like this to make ALT + I short-cut to work:

function custom() {
  console.log('The short-cut executed');
}
let isDead = false;
document.addEventListener('keydown', e => {
  if (e.altKey && e.code === 'KeyI') {
    custom();
    e.preventDefault();
  };
  if (isDead) {
    e.preventDefault();
  }
  isDead = (e.key === 'Dead');
});

<input>

The dead key itself can't be prevented, but the character produced after the dead key. As many properties of the keyboard event are now deprecated, the code uses relatively new code property, which will give the code of the physical key which was hit.

EDIT

As MacOS seems to refuse to prevent the default action of dead keys, you could use two events, one on document to trigger the shortcut, and another on inputs (or on document as well) to wipe out the caret (or any unwanted characters).

function custom() {
  console.log('The short-cut executed');
}

// KeyDown for triggering the shortcut
document.addEventListener('keydown', e => {
  if (e.altKey && e.code === 'KeyI') {
    custom();
  };
});

// Input for removing the dead key characters
$(document).on('input', 'input', e => {
  e.target.value = e.target.value.replace(/\^/g, '');
});

<script src="https://cdnjs.cloudflare./ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input>

The both events are needed because when keydown is triggered, the value of the input is not updated yet. On the other hand, the event object of input event doesn't have key/code properties.

I would pare the key to the actual character, like

$("#txtInput").keydown(
  function (event) {
    if (('Ii'.indexOf(String.fromCharCode(event.which)) >= 0) && event.altKey === true) {
      console.log('Here you go');
      // Do stuff here 
      event.preventDefault();
      event.stopPropagation();
    }
  }
);

Just pare to the key of the event and if its equal to 'i'. Feels like the most natural solution to me.

$('#txtInput').keydown(function(e){
   if( e.altKey && e.key == 'i'){
     e.preventDefault();
     console.log("Blocked");
  }        
});

<script src="https://cdnjs.cloudflare./ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="text" id="txtInput">