Contenteditable allow numbers only for editing?

Question

How can I make contenteditable elements only allow entry of numeric values?

I tried to use something like:

onkeypress='return event.charCode >= 48 && event.charCode <= 57'

...on elements that are contenteditable, but it still allows entry of alphabetic characters.

Thanks!

Answer 1

If you want to enter only 0-9 in contenteditable div then you can use this code. This code also prevent user to copy paste into the field

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

Javascript

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

if you want to enter decimal points instead of a number then you can use this javascript code

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

Answer 2

Salaam

This will allow only numbers

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

I have also tested decimals. There are three major conditions to get allowed

• Is a Number and Not delete button
• Not Space
• Not Enter Button
• Allow Decimal point only once

Let me know if you face any bug in comments

Thank you