Question

我有一个表，我需要让用户只修改一个数字字段，看起来最好的方法就是修改单元格本身。在服务器端，我有一个响应成功的方法：如果数据库中的更改成功或成功，则为true：相反的情况为false。

<td class="editQty" contenteditable>1000</td>

所以我希望每次用户修改此td单元时都会进行回调。将会改变＆＃39; jQuery函数要注意这个修改。我读过它没有。

我已经尝试过输入，但是在用户停止编辑之前它也会被注意到。我想知道当用户失去td的焦点时是否会发生某种事件。

$('tr').on('input', 'td[contenteditable]', function() {
        alert("whatever");
    });

Answer 1

$('tr').on('blur', 'td[contenteditable]', function() {
    alert("whatever");
});

Answer 2

您可以使用标准input元素来获取用户输入的值并在其上应用.blur()（也可能是.keypress()）事件，以及一些dom操纵它可以像这样：

$('td[contenteditable]').on('click', function() {
  var td = $(this);
  if(!td.hasClass('editing')){
  td.addClass('editing');
  
  var input = $('<input value="'+td.text()+'"/>');
  
  input.on('blur', function(){
    //fire ajax
    console.log('fire ajax');
    /*next line goes inside ajax:success*/
    td.text(input.val());
    $(this).remove();
    console.log('input removed');
    td.removeClass('editing');
  });
  
  $(this).empty().append(input);
  }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
<tr><th>header</th></tr>
<tr><td class="editQty" contenteditable>1000</td></tr>

</table>

使用jquery

2 个答案: