input only numbers with jquery

Question

input only numbers with jquery

Navigation

#1 by (5 votes)
#2 by (3 votes)
#3 by (1 votes)

2

I have a function that validates the characters entered 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 the 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;   
}

javascript jquery input

asked by anonymous 01.03.2017 / 15:53

3 answers

3

See if this 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><inputid="numeric">

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

01.03.2017 / 16:07

1

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

Use input itself of type 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 input restrictions (some are new to 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 (can not be changed)

required * - Specifies that an input field is required (must be filled in)

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

step * - Specifies the legal number ranges for an input field

value - Specifies the default value for an input field

* = HTML5

This can be seen at: link

These inputs currently comes with a spin button to increase and reduce the value, if you want to disable them, you can do with 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;
    }

02.03.2017 / 05:07

Calculate sum of digits of a number string formatting

score 5 · Accepted Answer

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>Somentenúmeros<inputtype="text" 
       size="10" 
       id="sonumero"
       name="sonumero" 
       class="somente-numero" 
       value="" />