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

标签： javascript jquery events contenteditable mouselistener

1条回答

放荡不羁爱自由

2楼-- · 2020-05-02 13:14

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

0人赞添加讨论(0) 举报

Contenteditable Events - Jquery

采纳回答

编辑标签

举报内容

检举类型

检举原因

检举说明(必填)

打开微信“扫一扫”，打开网页后点击屏幕右上角分享按钮

付费偷看金额在0.1-10元之间