Contenteditable仅允许编辑数字？

问题描述

我的contenteditable的工作方式是从数据库（MongoDB）获取数据并在表中显示数据后，它将在每行数据的末尾有两个名为edit和delete的按钮。按下编辑后，表格行将可供用户编辑，因此在进行编辑后，用户将单击保存按钮，然后对服务器执行ajax调用并发送更改，然后发送数据已成功更新的响应。这是关于该表的html代码。

The way my contenteditable works is after getting data from database(MongoDB) and displaying the data in a table, it will then have two buttons called edit and delete at the end of each row of data. After pressing edit, the table row will be editable for user and so after doing the edit, user will click on save button which will then do an ajax call to the server and send the changes over before sending a response that data has been updated successfully. This is my html code regarding the table.

<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> 中，但是我在搜索功能的回复中它仍然允许使用字母表。那么我应该把这段代码放在哪里，还是我做错了？在此先感谢。

Question is how do I add the code for making it such that only numbers can be added into the contenteditable content? I send my response from my js file as you can see in my search function and I am using this code to make it allow only numbers to be inputted in contenteditable onkeypress='return event.charCode >=48 && event.charCode <= 57'>however I have tried putting it in my <td> in my response in the search function but it still allows alphabets. So where should I put this code or am I doing it wrongly? Thanks in advance.

推荐答案

为什么不使用输入？

 <input type="number">

如果您仍想使用contenteditable，可以添加如下事件监听器：

If you still want to use contenteditable, you can add an event listener like so:

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

这将阻止所有不是数字的字符（0-9）

This will block all characters that are not numbers (0-9)

这篇关于Contenteditable仅允许编辑数字？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！