JavaScript Listener, "Keypress" Doesn't Detect Backspace

React onKeyPress event isn't detecting backspace

As can be read here, onKeyPress only receives charCode instead of keyCode.

This gives us three possible answers to this issue:

• Either change the event to onKeyDown
• Change the listener to check e.charCode
• Use e.which, which will work for both onKeyPress and onKeyDown.

keypress with backspace and delete

You can register two separate event listeners e.g. (keydown) for Delete & Backspace and (keypress) for everything else in your component's initialization as shown below:

  ngOnInit() {

    addEventListener('keypress', (event: KeyboardEvent) => {
      // Execute your logic here.
        console.log(event);
    });

    addEventListener('keydown', (event: KeyboardEvent) => {
      // Check for allowed keys on keydown
      if (event.key === 'Delete' || event.key === 'Backspace') {
        // Execute your logic here.
        console.log(event);
      }
    });

  }

Detect backspace and del on input event?

Use .onkeydown and cancel the removing with return false;. Like this:

var input = document.getElementById('myInput');

input.onkeydown = function() {
    var key = event.keyCode || event.charCode;

    if( key == 8 || key == 46 )
        return false;
};

---

Or with jQuery, because you added a jQuery tag to your question:

jQuery(function($) {
  var input = $('#myInput');
  input.on('keydown', function() {
    var key = event.keyCode || event.charCode;

    if( key == 8 || key == 46 )
        return false;
  });
});

​

How can I detect if backspace is pressed on the site?

You are close.

You are using keypress when you should be using keyup (or keydown if you want to know before the key press is complete).

KeyPress event is invoked only for character (printable) keys, KeyUp and KeyDown events is raised for all including non-printable such as Control, Shift, Alt, BackSpace, etc.

Try this:

document.addEventListener("keyup", function(event) {
  console.log(event.key);
  if (event.key === "Backspace") {
    document.getElementById("board").innerText += '\n'
  } else {
    document.getElementById("board").innerText += event.key
  }
});

JavaScript AddEventListener - Backspace

You should use keydown instead of keypress to detect Backspace properly:

document.addEventListener("keydown", function(event) {  if (event.key == "c")   {    console.log("C Pressed");    document.getElementById("btnConvert").click();  }
  var convertButton = document.getElementById("btnConvert");  if (event.key == "Backspace")   {    console.log("Backspace Pressed");    var textboxContent = document.getElementById("txtFahrenheit").value;    if (textboxContent.value == "" || textboxContent.value == "-")    {      convertButton.disabled = true;    }  }})

<button id="btnConvert">Convert</button><input id="txtFahrenheit" type="text" autofocus />

Detect when Delete or Backspace keys are pressed with onKeyPress and not with onKeyUp in React.js

You can use the classic JavaScript's event listeners for that.

It would be something like this:

componentDidMount() {
  document.addEventListener('keydown', this.onCero, false);
}

componentWillUnmount() {
  document.removeEventListener('keydown', this.onCero, false);
}

And then use can use the key codes in your onCero function:

onCero = (e) => {
  if (e.keyCode === 27 || e.keyCode === 13) {
    alert(e.keyCode);
  }
};

How to capture a backspace on the onkeydown event

Try this:

document.addEventListener("keydown", KeyCheck);  //or however you are calling your method
function KeyCheck(event)
{
   var KeyID = event.keyCode;
   switch(KeyID)
   {
      case 8:
      alert("backspace");
      break; 
      case 46:
      alert("delete");
      break;
      default:
      break;
   }
}

how to check for backspace(delete) keyPress in react native (iOS)

onChangeText only sends the updated text value. It does not send any other information such as keypress. onChange sends much more information, onChangeText is just for convenience.

You could use onKeyPress

<TextInput
  onKeyPress={({ nativeEvent }) => {
    nativeEvent.key === 'Backspace' ? //do action : //other action
  }}
/>

You cannot use alert however, you must use Alert in react-native which has a different API.

However it might be easier to just use onChangeText depending on what you're trying to accomplish. If the text value sent is shorter than the currently controlled text value, you can handle whatever backspace code you're using and manage the text input value in one place.

---

Related Topics