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 anywhere except from the input area to blur.(this is contenteditable feature). And I can not listen this action. How can I create event listener like keydown for this action.

This works for "Enter", but not click

<html>
    <head></head>
    <body>
        <table id="table">
            <thead>
                <tr>
                    <th>col1</th>
                    <th>col2</th>
                    <th>col3</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <th>#1</th>
                    <td contenteditable="true">Editable1</td>
                    <td contenteditable="true">Editable2</td>
                </tr>
            </tbody> 
        </table>
        <script
        src="https://code.jquery.com/jquery-3.3.1.js"
        integrity="sha256-2Kok7MbOyxpgUVvAk/HJ2jigOSYS2auK4Pfzbm7uH60="
        crossorigin="anonymous"></script>
    </body>
</html>

$('#table tbody tr').keydown(function (event){
    enter = event.which == 13,
    el = event.target;

    if(enter){
        el.blur();
        console.log("entered");
        console.log($(this).find(':nth-child(2)').html());
        console.log($(this).find(':nth-child(3)').html());
    }
});

Answers:

Answer

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 to
  var blur = true;
  //your original keydown
  document.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 work
  document.getElementById("some").addEventListener("blur",function(e){
      //decide what to do based on this variable
      if(!blur){
        e.currentTarget.focus();
      }
  },false);
  //listen globally to click events, and set blur variable based on a condiditon
  window.addEventListener("mousedown",function(e){
    if(!document.activeElement){return};
    //a condition, if we are on red square, blur won't take place
    if(
        document.elementFromPoint(e.clientX,e.clientY) === document.getElementById("some2")
    ){
        blur = false;
    } else {
        blur = true;
     }
  },false);
}()

Tags

Recent Questions

Top Questions

Home Tags Terms of Service Privacy Policy DMCA Contact Us Javascript

©2020 All rights reserved.