Contenteditableは編集にのみ数字を使用できますか？

Question

私のcontenteditableの仕組みは、データベース（MongoDB）からデータを取得してテーブルに表示した後、データの各行の終わりに編集と削除という2つのボタンがあります。編集を押すと、テーブルの行がユーザのために編集可能になるので、編集を実行した後、保存ボタンをクリックすると、サーバーへのajax呼び出しが行われ、変更が送信されてからデータが正常に更新された。これはテーブルに関する私のHTMLコードです。

<div id="table-wrapper"> 
    <div id="table-scroll"> 
    <table id="results" class="hidden" cellspacing=10px> 
     <thead> 
      <tr class = "spacing"> 
       <th>SAM ID</th> 
       <th>Item Description</th> 
       <th>Issued QTY</th> 
       <th>Opening QTY</th> 
       <th>Closing QTY</th> 
       <th>Corrupted QTY</th> 
       <th>Remarks</th> 
       <th>NTA SAM Reference No.</th> 
      </tr> 
     </thead> 
     <tbody id="bResults"> 
     </tbody> 
    </table> 
    <div id="noResults"></div> 
    </div> 

これは私のjsコードです。

$(".navbar-search").one('click', function(){ 
$.ajax({ 
    url: "http://localhost:3000/api/queryAllRecord", // server url 
    type: "POST", //POST or GET 
    contentType: "application/json", 
    // data to send in ajax format or querystring format 
    dataType : "JSON", //dataType is you telling jQuery what kind of 
    response to expect 
    success: function(response) { 
     alert('success'); 
     if(response){ 
      var len = response.length; 
      var txt = ""; 
      if(len > 0){ 
       for(var i=0;i<len;i++){ 
        if(response[i].samID && response[i].itemDescription){ 
         txt += "<tr class='rowdata'> 
           <td>"+response[i].samID+"</td>" 
           +"<td>"+response[i].itemDescription+"</td>" 
           +"<td>"+response[i].issuedQTY + "</td>" 
           +"<td>"+response[i].openingQTY + "</td>" 
           +"<td>"+response[i].closingQTY+"</td>" 
           +"<td>"+response[i].corruptedQTY+"</td>" 
           +"<td>"+response[i].Remarks+"</td>"+" 
           <td>"+response[i].ntaRequestRef+"</td>" 
           +"<td><input class='input button-edit' 
           type='submit' id='edit' value='Edit' onclick 
           = 'edit(this)' /></td>" 
           +"<td><input class='button-edit' 
           type='button' id='delete' value='Delete' 
           onclick='deleteResult(this)' /></td>"+" 
           </tr>"; 
        } 
       } 

       $("#bResults").empty(); 
       if(txt != ""){ 
        $("#results").removeClass("hidden"); 
        $("#bResults").append(txt); 
       } 
      } 
     } 
    }, 
    error: function(response) { 
     alert('error'); 
    } 
}); 
event.preventDefault(); 
}); 
function edit(el){ 
var current_id = $(el).closest('tr'); 
var currentTD = $(el).closest('tr').find('td'); // tds except the td which 
closest to the edit button 
var samId = currentTD[0].textContent; 
var itemDescrip= currentTD[1].textContent; 
var issueQty = currentTD[2].textContent; 
var openingQty = currentTD[3].textContent; 
var closingQty = currentTD[4].textContent; 
var corruptedQty = currentTD[5].textContent; 
var Remarks = currentTD[6].textContent; 
var ntaSamRef = currentTD[7].textcontent; 
var postData = { "samId": samId, "itemDescrip": itemDescrip, "issueQty" : 
       issueQty,"openQty" : openingQty, "closeQty" :closingQty, 
       "corrupQty": corruptedQty, "remarks": Remarks, "ntaReqRef": 
       ntaSamRef}; 
var postJSON = JSON.stringify(postData); 
if ($(el).val() == 'Edit') {     
    $.each(currentTD, function() { 
     $(this).prop('contenteditable', true); 
    }); 
} else { 
    $.each(currentTD, function() { 
     $(this).prop('contenteditable', false); 
    }); 
} 
$(el).val($(el).val() == 'Edit' ? 'Save' : 'Edit'); 
if($(el).val() == 'Edit'){ 
    $.ajax({ 
    url: "http://localhost:3000/api/updateRecord", // server url 
    type: "POST", //POST or GET 
    contentType: "application/json", // data to send in ajax format or 
    querystring format 
    data: postJSON, 
    dataType : "JSON", //dataType is you telling jQuery what kind of 
    response to expect 
    success: function(response) { 
     alert('success'); 
     $("#deleteresult").html("Updated Successfully"); 

    }, 
    error: function(response) { 
     alert('error'); 
    } 
}); 
} 
} 

質問コンテンツ作成可能なコンテンツに数字だけを追加できるようにするコードを追加するにはどうすればよいですか？私は私の検索機能で見ることができるように私のjsファイルから私の応答を送信し、私はそれが数字のcontentstitable onkeypress='return event.charCode >= 48 && event.charCode <= 57'>で入力できるようにするためにこのコードを使用しているが、私はそれを入れてみた<td>私の応答それでもアルファベットは許されます。だから私はこのコードを置くべきですか、それとも私は間違ってやっていますか？前もって感謝します。

Answer 1

なぜ入力を使用しないのですか？

<input type="number"> 

あなたはまだのcontentEditable使用したい場合、あなたはそのようにイベントリスナーを追加することができます。

$("#myeditablediv").keypress(function(e) { 
    if (isNaN(String.fromCharCode(e.which))) e.preventDefault(); 
}); 

これは、数字（0-9）ではないすべての文字