使用jQuery和AJAX提交的可編輯<td>，限制計數并僅允許數字

以下是使用 jQuery 和 AJAX 使用 HTML5 表資料到資料庫表的行內插入。我想僅使用數字和限制計數來限制欄位。這些不是文本輸入欄位。

例如，所有欄位都應該只能輸入數字。和數字欄位允許最多 2 位數字，所有其他欄位允許最多 3 位數字。

我該怎么做呢？

$("#btnSaveAction").on("click", function() {
  params = ""
  $("td[contentEditable='true']").each(function() {
    if ($(this).text() != "") {
      if (params != "") {
        params  = "&";
      }
      params  = $(this).data('id')   "="   $(this).text();
    }
  });
  if (params != "") {
    $.ajax({
      url: "insert-row.html",
      type: "POST",
      data: params,
      success: function(response) {
        $("#ajax-response").append(response);
        $("td[contentEditable='true']").text("");
      }
    });
  }
});

<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>
        < <td contentEditable="true" data-id="product_number"></td>
          <td contentEditable="true" data-id="product_count"></td>
          <td contentEditable="true" data-id="product_code"></td>
          <td contentEditable="true" data-id="product_price" style="text-align:right;"></td>
      </tr>
    </tbody>
  </table>
  <div id="btnSaveAction">Save to Database</div>
</div>

代碼來自這里

uj5u.com熱心網友回復：

您需要向您td[contentEditable="true"]的 s 添加一個事件偵聽器并檢查按下的鍵和文本的長度。然后，只要不允許使用密鑰，就只需呼叫e.preventDefault()拒絕編輯，否則長度會超出限制。下面我使用了該"keydown"事件，因為它在按鍵完成之前以及將字符添加到元素之前觸發。

$('td[contentEditable="true"]').on("keydown", e => {
  // define allowed keys
  const allow = ['0', '1', '2', '3', '4', '5', '6', '7', '8', '9', '.', 'Tab', 'Backspace']
  // get pressed key
  const k = e.key
  if (allow.includes(k)) {
    // get the value before this keydown
    const val = e.target.textContent

    // determine the limit according to your logic
    const limit = Number(e.target.dataset['length']);

    if (val.length == limit && 'Tab' != k && 'Backspace' != k) {
      // pressing this key would put the value over the limit
      e.preventDefault()
      console.log('deny: '   k, val, limit)
    } else
      console.log('allow: '   k, val, limit)

  } else {
    // key not allowed
    e.preventDefault()
    console.log('deny: '   k)
  }

})
$("#btnSaveAction").on("click", function() {
  params = ""
  $("td[contentEditable='true']").each(function() {
    if ($(this).text() != "") {
      if (params != "") {
        params  = "&";
      }
      params  = $(this).data('id')   "="   $(this).text();
    }
  });
  if (params != "") {
    $.ajax({
      url: "insert-row.html",
      type: "POST",
      data: params,
      success: function(response) {
        $("#ajax-response").append(response);
        $("td[contentEditable='true']").text("");
      }
    });
  }
});

<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>
        <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>
        <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>

標籤：html jQuery 阿贾克斯

上一篇：JqueryAPI值在輸入文本區域中不起作用

下一篇：SyntaxError：“[objectObject]”不是有效的JSON