input only numbers with jquery

Asked

Viewed 16,658 times

4

I have a function that validates typed characters and does not let the user use special characters but this same function does not work for numbers, someone knows some function in jquery to validate only numbers in input

function sem_n(e,args)
{       
    if (document.all){var evt=event.keyCode;} 
    else{var evt = e.charCode;} 
    var valid_chars = '0123456789'+args;    // criando a lista de teclas permitidas
    var chr= String.fromCharCode(evt);  // pegando a tecla digitada
    if (valid_chars.indexOf(chr)>-1 ){return true;} 
    if (valid_chars.indexOf(chr)>-1 || evt < 9){return true;}   
    return false;   
}
  • I want to prevent the user from typing anything other than numbers

5 answers

9

See if that helps you:

$('#numeric').keyup(function() {
  $(this).val(this.value.replace(/\D/g, ''));
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input id="numeric">

First I monitor the input by the event keyup, when a character is typed I take the field value and delete all non-numeric characters (\D)

6


jQuery(function($) {
  $(document).on('keypress', 'input.somente-numero', function(e) {
  var square = document.getElementById("sonumero");
    var key = (window.event)?event.keyCode:e.which;
	if((key > 47 && key < 58)) {
    	sonumero.style.backgroundColor = "#ffffff";
    	return true;
    	
  	} else {
  	  	sonumero.style.backgroundColor = "#ff0000";
 		return (key == 8 || key == 0)?true:false;
 		
 	}
  });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>Somente números
<input type="text" 
       size="10" 
       id="sonumero"
       name="sonumero" 
       class="somente-numero" 
       value="" />

2

Hello, you can put this right in the input that solves:

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

hope I’ve helped!!

1

$('#cpf').bind('keyup', function(e){
           if(e.keyCode < 47 || e.keyCode >57 ){
               alert(" esse e um campo apenas numerico");
               $(this).val("");
           }
       })

1

I want to prevent the user from typing anything other than numbers

Use yourself input of the kind number of HTML

The <input type="number"> defines a numeric input field .

You can also set restrictions on which numbers are accepted.

The following example displays a numeric input field, where you can enter a value from 1 to 5:

    <form>
        <input type="number" name="quantity" min="1" max="5">
    </form>

Entry Restrictions

Here is a list of some common entry restrictions (some are new in HTML5):

disabled - Specifies that an input field should be disabled

max * - Specifies the maximum value for an input field

maxlength - Specifies the maximum number of characters for an input field

min * - Specifies the minimum value for an input field

Pattern * - Specifies a regular expression to check the input value

readonly - Specifies that an input field is read-only (cannot be changed)

required * - Specifies that an entry field is mandatory (must be completed)

size - Specifies the width (in characters) of an input field

step * - Specifies legal number ranges for an input field

value - Specifies the default value for an input field

* = HTML5

This can be seen in: https://www.w3schools.com/html/html_form_input_types.asp

Those inputs currently comes with a spin button to increase and reduce the value, if you want to disable them, you can do CSS:

    input[type=number]::-webkit-outer-spin-button,
    input[type=number]::-webkit-inner-spin-button {
        -webkit-appearance: none;
        margin: 0;
    }

    input[type=number] {
        -moz-appearance:textfield;
    }
  • I try this but for some reason it didn’t work, I only use Html5 but its response was extremely efficient

Browser other questions tagged

You are not signed in. Login or sign up in order to post.