Home / Questions / 279255
Accepted
Gian Franco Alexis Poma Vidal
Asked: 2020-07-16 21:04:43 +0800 CST 2020-07-16 21:04:43 +0800 CST

Limit text size and Avoid numbers with Jquery

  • 772

I am validating a <input text>and I want that no more than 5 characters are written and that they do not accept numbers, but I do not get results.

$("#texto").on("keypress", function(event){           
    if(event.which > 47 || event.which < 58 || $(this).val().length == 5){
         return false;
     }                
});
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
  
</head>
<body>
  <input id="texto" type="text">
</body>
</html>

javascript

1 Answers

  1. Best Answer

    Update

    The problem can be solved with just html without the help of jquery as follows:

    <input id="texto" type="text" onkeypress="return !(event.charCode >= 48 && event.charCode <= 57)" maxlength=5 >

    To prevent numbers from being entered, the attribute can be used onkeypress:

    onkeypress="return !(event.charCode >= 48 && event.charCode <= 57)"

    and to limit the maximum number of characters that can be entered into the input you can add:

    maxlength=5

    For more information see:

    Block numbers, letters and/or special characters in an input

    previous answer

    The code is fine, you only have a logic problem in this part:

    if(event.which > 47 || event.which < 58 || $(this).val().length == 5){

    When you put event.which > 47 || event.which < 58this it will always be true, therefore no character will be written. The correct form is:

     if((event.which > 47 && event.which < 58) || $(this).val().length == 5){

    since you want to avoid numbers between 0 and 9 .

    The working code is as follows:

        $("#texto").on("keypress", function(event){
        if((event.which > 47 && event.which < 58) || $(this).val().length == 5){
            return false;
        }
    });
                <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>

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

</head>
<body>
    <input id="texto" type="text" size=5>
</body>

</html>

    I hope it helps you, greetings.

    • 4