How to allow only numbers as input in Javascript , why doesn't my code work?

Question

I want write a function to prevent any input other than numbers 0-9 and the return key so the user can make corrections. I know that this type of question have been asked several times but why doesn't my code work. Does it has to do with the shift key? Why am I getting "event is not defined"?

In the snippet I can prevent letters but special characters, like @, keep being inserted. Why am I getting a reference error?

// I have two functions 
function formatarCPF(event, controle) {
    //this line check the returned value from the functions defined below
    var eNumero = permitirApenasNumeros(event.keyCode);

    if (!eNumero)
        event.preventDefault();

    if (event.keyCode != 8) {
        var valor = controle.value;

        if (valor.length == 3) {
            controle.value = (controle.value + ".");
        }

        if (valor.length == 7) {
            controle.value = (controle.value + ".");
        }

        if (valor.length == 11) {
            controle.value = (controle.value + "-");
        }
    }
}

if(event.keyCode != 8) {
    var valor = controle.value;

    if (valor.length == 0) {
        controle.value = "(";
    }

    if(valor.length == 2) {
        controle.value = (controle.value +  String.fromCharCode(event.which)  + ")");
        event.preventDefault();
    }

    if (valor.length == 9) {
        controle.value = (controle.value + "-");
    }
}

function permitirApenasNumeros(code) {
    //checks to see if the user typed a number
    var regex = /[0-9]/;

        if(regex.test(String.fromCharCode(code)) || code == 8) {
           return true;
        } else {
           return false;
        }
    }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>


<div>
    <label for="tbCPF">CPF:</label>
    <input  onkeydown="formatarCPF(event, this)" maxlength="14" placeholder="___.___.___-__"  />
</div>

That's not how you use event listeners. Just replace onkeydown="formatarCPF(event, this)" with onkeydown="formatarCPF". — devius
– devius, Commented Mar 2, 2018 at 11:34
Did you physically go out your way to format your code so bad.. :) — Keith
– Keith, Commented Mar 2, 2018 at 11:37

Deepesh kumar Gupta · Accepted Answer · 2018-03-02 11:44:09Z

5

Try HTML5

<input type="number" />

Or regex

<input type="text" pattern="^[0-9]*$" />

edited Mar 2, 2018 at 11:44

answered Mar 2, 2018 at 11:36

Deepesh kumar Gupta

8962 gold badges12 silver badges31 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Deepesh kumar Gupta Over a year ago

One can use below solution as well. Jsfiddle.net/Lm2hS/

devius · Accepted Answer · 2018-03-02 12:12:32Z

1

Your code formatting has many issues that make it nearly impossible to read, but it seems to me that the problem is your second if(event.keyCode != 8) { block that is outside the formatarCPF event listener. Since it is outside, the event variable isn't defined.

If you format your code properly this would be super trivial to catch. You can use tools like jsbeautifier to do it for you if you prefer.

edited Mar 2, 2018 at 12:12

answered Mar 2, 2018 at 11:44

devius

3,0261 gold badge26 silver badges26 bronze badges

1 Comment

Diego Alves Over a year ago

I receive critics about my formatting all the time. I will try to improve it.

messerbill · Accepted Answer · 2018-03-02 11:35:18Z

1

To allow only numbers inside an HTML Input Element just set its type to number

<input min='0' type="number">

edited Mar 2, 2018 at 11:35

answered Mar 2, 2018 at 11:33

messerbill

5,6391 gold badge31 silver badges39 bronze badges

Comments

Felipe Fernández Sánchez · Accepted Answer · 2018-03-02 11:35:55Z

1

Why not simply scrap all that JavaScript and use:

<input type="text" onkeypress="return event.charCode >= 48 && event.charCode <= 57">

answered Mar 2, 2018 at 11:35

Felipe Fernández Sánchez

417 bronze badges

Comments

Abslen Char · Accepted Answer · 2018-03-02 12:06:53Z

0

This should work HTML

 <input type="text" class="textfield" value="" id="extra7" name="extra7" onkeypress="return isNumber(event)" />

JAVASCRIPT

 function isNumber(evt) {
        evt = (evt) ? evt : window.event;
        var charCode = (evt.which) ? evt.which : evt.keyCode;
        if (charCode > 31 && (charCode < 48 || charCode > 57)) {
            return false;
        }
        return true;
    }

answered Mar 2, 2018 at 12:06

Abslen Char

3,1453 gold badges17 silver badges29 bronze badges

Collectives™ on Stack Overflow

How to allow only numbers as input in Javascript , why doesn't my code work?

5 Answers 5

1 Comment

1 Comment

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

1 Comment

1 Comment

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related