Contenteditable Events - Jquery

I added contenteditable prop in the table. I am getting data by using keydown event, when user hit 'Enter' it takes the new input and blur the area. But user also can click anywhe

Solution 1:

There are many ways of doing this, one that came to my mind is to listen globally to mousedown events, and decide what to do based on that since mouse down fires before the blur: FIDDLE

If you are on the red square, blur will not take place.

!function(){
    //set a variable to listen tovar blur = true;
  //your original keydowndocument.getElementById("some").addEventListener("keydown",function(e){
    if(e.which === 13){
      e.currentTarget.blur();
      console.log("entered");
    }
  },false);
    //add a blur listener to modify, e.preventDefault won't workdocument.getElementById("some").addEventListener("blur",function(e){
      //decide what to do based on this variableif(!blur){
        e.currentTarget.focus();
      }
  },false);
  //listen globally to click events, and set blur variable based on a condiditonwindow.addEventListener("mousedown",function(e){
    if(!document.activeElement){return};
    //a condition, if we are on red square, blur won't take placeif(
        document.elementFromPoint(e.clientX,e.clientY) === document.getElementById("some2")
    ){
        blur = false;
    } else {
        blur = true;
     }
  },false);
}()