Javascript Contenteditable是否只允许编辑数字？

我的contenteditable的工作方式是从数据库（MongoDB）获取数据并在表中显示数据后，它将在每行数据的末尾有两个名为edit和delete的按钮。按edit之后，用户可以编辑表行，因此在进行编辑之后，用户将单击save按钮，该按钮将向服务器执行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>

山姆ID
项目说明
发出数量
期初数量
期末数量
损坏数量
评论
NTA SAM参考号。

这是我的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');
    }
});
}
}

$（“.navbar搜索”）.one（'click'，function（）{
$.ajax({
url:“http://localhost:3000/api/queryAllRecord“，//服务器url
键入：“POST”、//POST或GET
contentType:“应用程序/json”，
//要以ajax格式或querystring格式发送的数据
dataType:“JSON”//dataType是告诉jQuery什么类型的
对预期的反应
成功：功能（响应）{
警惕（“成功”）；
如果（答复）{
var len=响应长度；
var txt=“”；
如果（len>0）{
对于（var i=0；i

，但是我已经尝试在搜索函数中的响应中将其放入

，但它仍然允许使用字母表。因此，我应该将此代码放在何处，还是做错了？提前感谢。

为什么不使用输入

 <input type="number">

---

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

如果您只想在contenteditable div中输入0-9，则可以使用此代码。此代码还阻止用户将粘贴复制到字段中

<div contenteditable id="myeditablediv"  oncopy="return false" oncut="return false" onpaste="return false">10</div>

如果您想输入小数点而不是数字，那么可以使用以下javascript代码

 $("#myeditablediv").keypress(function(e) {
        var x = event.charCode || event.keyCode;
        if (isNaN(String.fromCharCode(e.which)) && x!=46) e.preventDefault();
    });

萨拉姆

这将只允许数字

$('[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();
});

我还测试了小数。有三个主要条件可以被允许

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

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

---

谢谢

如果只允许数字，可以使用：

if (e.which < 48 || e.which > 57) e.preventDefault();

例如，正则表达式以“^”开头以防止F5工作。我们添加了e.keycode 8和46以避免backspace/delete上的prevent默认值

---

这个方法不允许小数，您需要修改它的正则表达式

我将它作为表数据发送，而不是输入，如果不是，它将继续期望输入。至于第二个方法，您对

String.fromCharCode

的意思是什么？最初是e，它只是一个指向字符的数字。String.fromCharCode（e.which）将按下的键转换为其各自的字符。我已经尝试过了，但似乎不起作用。我使用类来定义表数据，当按下键时，它应该执行该函数，但什么也没有发生，它仍然是相同的。

$（.editNumber”）.keypress（函数（）{if（isNaN（String.fromCharCode（event.which）））event.preventDefault（）；}）

editNumber是我的表数据类，但是没有任何更改您忘记传递事件参数：

$（“.editNumber”）.keypress（函数（事件）{…

isNaN（“”）==false

-如果允许用户输入空格是个问题，请使用

If（e.which<48 | e.which>57）e.preventDefault（）；

。这只允许字符代码48-57（数字0-9）。还有一点，这段代码不会处理复制/剪切/粘贴和上下文菜单更改。我想我会为将来的访问者注意到这一点：）

$('[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();
});

if (e.which < 48 || e.which > 57) e.preventDefault();

if (!e.key.match(/^[0-9]/g) && e.keyCode !== 8 && e.keyCode !== 46) {
    e.preventDefault();
}