Question

我在表格中添加了内容可编辑的道具。我正在使用keydown事件获取数据，当用户按下“ Enter”键时，它将获取新输入并模糊该区域。但是用户也可以单击除输入区域以外的任何位置以使其模糊（这是可编辑的功能）。我不能听这个动作。如何为此操作创建事件监听器（如keydown）。

这适用于“ Enter”，但不能单击

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

Answer 1

执行此操作的方法有很多，我想到的一种方法是全局侦听mousedown事件，并基于此来决定要执行的操作，因为鼠标按下会在模糊之前触发：FIDDLE

如果您在红色方块上，则不会发生模糊。

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

可编辑内容的事件-jQuery

1 个答案: