转义码输入的键盘问题 [英] Keyup issue with escape-code input

问题描述

我正在编写一个页面，以将信息从数据库表中取出并将其放入HTML表中.然后，我使用jQuery在单击时使任何<td>单元格可编辑，现在尝试使用jQuery keyup函数检测何时可编辑单元格已被编辑，然后使用ajax使用已编辑的信息来更新数据库.当按下数字，字母和空格键时，按键是拾取按键，但是由于某些原因，在按下退格键，删除键或Enter键时，按键不会拾取按键.我不确定我的代码中是否有错误或者是什么原因引起的.

I am writing a page to take information out of a database table and place it into an HTML table. I am then using jQuery to make any <td> cell editable upon being clicked on and am now trying to use the jQuery keyup function to detect when the editable cell has been edited and then use ajax to update the database with the edited information. keyup is picking up when numbers, letters, and the space bar are pressed but for some reason it is not picking up when the backspace, delete, or enter keys are being pressed. I am not sure if I have an error in my code or what could be causing this.

任何评论或建议都将非常有帮助，非常感谢！

Any comments or suggestions would be extremely helpful, thank you very much!

这是我用于click事件，然后用于快捷键的jQuery，以及一个快速表格示例:

Here is the jQuery I am using for the click event and then also for keyup along with a quick table example:

$('td').click(function() {
  var val = ($(this).siblings().first().text());
  var col = $(this).parent().children().index($(this));

  $(this).prop('contenteditable', true);

  $(this).keyup(function() {
    $.ajax({
        method: "POST",
        url: "updatedatabase.php",
        data: {
          content: $(this).text(),
          date: val
        }
      })
      .done(function(msg) {
        alert("Data Saved: " + msg);
      });
  });
});

table, th, td {
  border: 1px solid black;
  border-collapse: collapse;
  font-size: 90%;
}
th, td {
  padding: 8px;
}
td {
  text-align: center;
}
table {
  margin: 0 auto;
}
td:click {
  background-color: blue;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
  <tr>
    <th></th>
    <th>22oz Dark</th>
    <th>12ct 4oz Dark</th>
  </tr>
  <tr>
    <th>2016-01-01</th>
    <td>9785</td>
    <td>2478</td>
  </tr>
  <tr>
    <th>2016-01-02</th>
    <td>8754</td>
    <td>2136</td>
  </tr>
  <tr>
    <th>2016-01-03</th>
    <td>13587</td>
    <td>2203</td>
  </tr>
  <tr>
    <th>2016-01-04</th>
    <td>14111</td>
    <td>3297</td>
  </tr>
  <tr>
    <th>2016-01-05</th>
    <td>13212</td>
    <td>3101</td>
  </tr>
  <tr>
    <th>2016-01-06</th>
    <td>16335</td>
    <td>3299</td>
  </tr>
  <tr>
    <th>2016-01-07</th>
    <td>15421</td>
    <td>3100</td>
  </tr>
</table>

推荐答案

要获取更改，您会发现input事件很有用:即使在通过鼠标或上下文菜单进行的更改(例如复制/粘贴...等).

To pick up changes, you could find the input event useful: it triggers even on changes that are made via the mouse or context menu (think copy/paste, ...etc).

您绝对还应该从外部事件处理程序中删除内部事件处理程序.现在，每次单击相同的td元素时，您都会累积keyup事件处理程序的数量.

You should also definitely take out the inner event handler from the outer event handler. As you have it now, you'll accumulate the number of keyup event handlers every time you click on the same td element.

此外，我认为您不希望用户更改第一列，因为它包含您发送到服务器的密钥.

Also, I don't think you want users to change the first column, as it contains the key you send to the server.

这就是我的建议:

// exclude first column from jQuery selection:
$('td').not(':first').click(function() {
  $(this).prop('contenteditable', true);
});

// Use input event, and define it outside of above event handler:
$('td').on('input', function() {
  console.log('event');
  $.ajax({
    method: "POST",
    url: "updatedatabase.php",
    data: {
      content: $(this).text(),
      date: $(this).siblings().first().text() // calculate on-the-spot
    }
  })
  .done(function(msg) {
    alert("Data Saved: " + msg);
  });
});

与您的问题无关:当用户单击单元格时，可以使内容可编辑.之后，您永远都不会使它不可编辑，因此您可能会想知道为什么为什么从一开始就不让它们都可编辑...

Unrelated to your question: you make the content editable when the user clicks on a cell. You never make it uneditable afterwards, so one could wonder why you don't make them all editable from the start...

这篇关于转义码输入的键盘问题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！