Contenteditable Events - Jquery

2020-05-02 13:05发布

问题:

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());
    }
});

回答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 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);
}()