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);
}()
Post a Comment for "Contenteditable Events - Jquery"