Contenteditable仅允许编辑数字？

Question

我的contenteditable的工作方式是从数据库(MongoDB)获取数据并在表中显示数据后,它将在每行数据的末尾有两个名为edit和delete的按钮.按下编辑后,表格行将可供用户编辑,因此在进行编辑后,用户将单击"保存"按钮,然后对服务器执行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文件中发送我的回复,正如你在我的搜索功能中看到的那样,我正在使用这个代码使它只允许输入数字,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)

Answer 2

萨拉姆

这将只允许数字

$('[contenteditable="true"]').keypress(function(e) {
    var x = event.charCode || event.keyCode;
    if (isNaN(String.fromCharCode(e.which)) && x!=46 || x===32 || x===13 || (x===46 && event.currentTarget.innerText.includes('.'))) e.preventDefault();
});

我也测试了小数。获得许可需要具备三个主要条件

• 是数字而不是删除按钮
• 不是空间
• 不输入按钮
• 只允许小数点一次

如果您在评论中遇到任何错误，请告诉我

谢谢