how to prevent ONBLUR event when keypress or enter?

Question

I have used two events KEYPRESS AND ONBLUR in my input field, when the ENTER key pressed, it triggers KEYPRESS and ONBLUR as well.

Code:

<div id="text">
 <input type="text" onblur="onBlur()" onkeypress="myFunction(event)">
</div>
 
 window.myFunction = function(e) {
 if (e.which == 13) {
 document.getElementById("text").innerHTML = "text";
   console.log("keypress");
 }
}

window.onBlur = function() {
  console.log("blur");
}

fiddle

Note:

I need to handle keypress as well onblur event, But i need only one event should be triggered at a time.

For example:

1. When I press enter key, myFunction should be triggered. Not onBlur.
2. When I click outside of the input field, onBlur function should be called.

Question:

how to prevent ONBLUR event, when ENTER key is pressed.

Your suggestion will be grateful

Answer 1

You can just reset the property to no longer hold a reference to the previously stored callback function with onblur = "".

Also, don't set up your functions as properties of window, which makes them global. Instead just declare them in the scope you want them accessible in.

However, you really should not be setting up event handlers using HTML attributes as they create spaghetti code, cause global wrapper functions to be created around your handler functions that alter this binding and don't follow W3C DOM Event standards.

This code really should used the .addEventListener() and .removeEventListener() model:

// Wait until the DOM is loaded
window.addEventListener("DOMContentLoaded", function(){

  // Get DOM reference to the input element in question
  var input = document.getElementById("myInput");

  // Attach callbacks to element for various events
  input.addEventListener("blur", doBlur);
  input.addEventListener("keypress", doKeypress);

  // By declaring your functions inside a larger function, they avoid
  // become global functions and have the appropriate scope.
  function doKeypress(e) {
   // Check for ENTER key
   if (e.keyCode === 13) {
     // Remove blur event handler
     input.removeEventListener("blur", doBlur);
   
     // Do actions
     document.getElementById("text").innerHTML = "text";   
   }
  }

  function doBlur() {
    console.log("blur");
  }
});

<div id="text">
 <input type="text" id="myInput">
</div>