使用jQuery和AJAX实现可编辑表格单元格的数字输入与长度限制

$('td[contentEditable="true"]').on("keydown", e => {
  // 定义允许的键，包括数字、小数点和必要的控制键
  const allow = ['0', '1', '2', '3', '4', '5', '6', '7', '8', '9', '.', 'Tab', 'Backspace', 'ArrowLeft', 'ArrowRight', 'Delete', 'Home', 'End'];
  const k = e.key; // 获取按下的键

  if (allow.includes(k)) {
    // 如果是允许的键
    // ... 后续的长度限制逻辑
  } else {
    // 如果键不在允许列表中，阻止默认行为
    e.preventDefault();
    console.log('不允许的键：' + k);
  }
});

$('td[contentEditable="true"]').on("keydown", e => {
  const allow = ['0', '1', '2', '3', '4', '5', '6', '7', '8', '9', '.', 'Tab', 'Backspace', 'ArrowLeft', 'ArrowRight', 'Delete', 'Home', 'End'];
  const k = e.key;

  if (allow.includes(k)) {
    const val = e.target.textContent; // 获取当前单元格的文本内容
    const limit = Number(e.target.dataset['length']); // 从data-length属性获取长度限制

    // 如果当前长度已达到限制，并且按下的不是Tab键或Backspace键，则阻止输入
    if (val.length >= limit && !['Tab', 'Backspace', 'ArrowLeft', 'ArrowRight', 'Delete'].includes(k)) {
      e.preventDefault();
      console.log(`超出长度限制 (${limit})：${k}`);
    } else {
      console.log(`允许输入：${k}`);
    }
  } else {
    e.preventDefault();
    console.log('不允许的键：' + k);
  }
});

<script src="http://code.jquery.com/jquery-1.10.2.js"></script>
<div id="add-product">
  <div class="txt-heading">Add Product</div>
  <table cellpadding="10" cellspacing="1">
    <tbody>
      <tr>
        <th><strong>Number</strong></th>
        <th><strong>Count</strong></th>
        <th><strong>Code</strong></th>
        <th style="text-align:right;"><strong>Price</strong></th>
      </tr>
      <tr>
        <!-- Number, Count, Code 字段限制为2位数字 -->
        <td contentEditable="true" data-id="product_number" data-length="2"></td>
        <td contentEditable="true" data-id="product_count" data-length="2"></td>
        <td contentEditable="true" data-id="product_code" data-length="2"></td>
        <!-- Price 字段限制为3位数字 -->
        <td contentEditable="true" data-id="product_price" data-length="3" style="text-align:right;"></td>
      </tr>
    </tbody>
  </table>
  <div id="btnSaveAction">Save to Database</div>
</div>

$("#btnSaveAction").on("click", function() {
  let params = "";
  $("td[contentEditable='true']").each(function() {
    const value = $(this).text().trim(); // 获取并清理文本内容
    if (value !== "") {
      if (params !== "") {
        params += "&";
      }
      params += $(this).data('id') + "=" + value;
    }
  });

  if (params !== "") {
    $.ajax({
      url: "insert-row.html", // 后端处理数据的URL
      type: "POST",
      data: params,
      success: function(response) {
        $("#ajax-response").append(response); // 显示后端响应
        $("td[contentEditable='true']").text(""); // 清空单元格内容
        alert("数据保存成功！"); // 提示用户
      },
      error: function() {
        alert("数据保存失败，请重试。");
      }
    });
  } else {
    alert("没有可保存的数据。");
  }
});