Maximum and minimum values in a textbox

Question

I have a textbox  Is there a way where the highest value the user can enter is 100 and the lowest is 0   So if the user types in a number more than 100 then it will automatically change the value to 100 using a keyup   function and if user types in a number less than 0 it will display as 0   My textbox is below    lt input type  text  name  textWeight  id  txtWeight  maxlength  5   gt   lt  td gt    Can this be done using JavaScript

User · Answer

If you are OK with HTML5 it can be accomplished without any JavaScript code at all...

<input type="number" name="textWeight" id="txtWeight" max="5" min="0" />

Otherwise, something like...

var input = document.getElementById('txtWeight');

input.addEventListener('change', function(e) {
    var num = parseInt(this.value, 10),
        min = 0,
        max = 100;

    if (isNaN(num)) {
        this.value = "";
        return;
    }

    this.value = Math.max(num, min);
    this.value = Math.min(num, max);
});

This will only reset the values when the input looses focus, and clears out any input that can't be parsed as an integer...

OBLIGATORY WARNING

You should always perform adequate server-side validation on inputs, regardless of client-side validation.

User · Answer

Here s a simple function that does what you need    lt script type  text javascript  gt  function minmax value  min  max         if parseInt value   lt  min    isNaN parseInt value             return min       else if parseInt value   gt  max           return max       else return value     lt  script gt   lt input type  text  name  textWeight  id  txtWeight  maxlength  5  onkeyup  this value   minmax this value  0  100    gt    If the input is not numeric it replaces it with a zero

User · Answer

function  getValue input           var value   input value   parseInt input value    0          let min   input min          let max   input max          if value  lt  min               return parseInt min            else if value  gt  max               return parseInt max           else return value          Usages  changeDotColor    event    gt            let value   this getValue event target    value will be always number         console log value          console log typeof value

User · Answer

Yes it can  You might consider first to set the value of maxlength to 3 and then write an event handler for the keyup-event   The function can evaluate the user input using regex or parseInt to validate the user input and set it to any desired value  if the input is incorrect

User · Answer

If you re not using HTML5 this is a pretty basic JavaScript form validation   Side note - I d change the value to 0 on the blur event instead of keyup  as a user I think changing the text as I m typing would be annoying to no end

User · Answer

Its quite simple dear you can use range validator   lt asp TextBox ID  TextBox2  runat  server  TextMode  Number  gt  lt  asp TextBox gt   lt asp RangeValidator ID  RangeValidator1  runat  server         ControlToValidate  TextBox2         ErrorMessage  Invalid number  Please enter the number between 0 to 20          MaximumValue  20  MinimumValue  0  Type  Integer  gt  lt  asp RangeValidator gt      lt asp RequiredFieldValidator ID  RequiredFieldValidator1  runat  server         ControlToValidate  TextBox2  ErrorMessage  This is required field  can not be blank   gt  lt  asp RequiredFieldValidator gt    otherwise you can use javascript   lt script gt  function minmax value  min  max         if parseInt value   lt  min    isNaN parseInt value             return 0       else if parseInt value   gt  max           return 20       else return value     lt  script gt                           lt input type  text  name  TextBox1  id  TextBox1  maxlength  5  onkeyup  this value   minmax this value  0  20     gt

User · Answer

Set Attributes in CodeBehind  textWeight Attributes Add  minimum   minValue ToString     textWeight Attributes Add  maximum   maxValue ToString       Result    lt input type  text  minimum  0  maximum  100  id  textWeight  value  2  name  textWeight  gt    By jQuery      jQuery document  ready function               var textWeight      input type  text   textWeight             textWeight change function                     var min   textWeight attr  minimum                   var max  textWeight attr  maximum                   var value   textWeight val                   if val  lt  min    val  gt  max                                      alert  Your Message                         textWeight val min

User · Answer

https   jsfiddle net co1z0qg0 141    lt input type  text  gt   lt script gt     input   on  keyup   function         var val   parseInt   this  val             max   100       val   isNaN val    0   Math max Math min val  max   0         this  val val        lt  script gt    or better  https   jsfiddle net co1z0qg0 142    lt input type  number  max  100  gt   lt script gt    function            input type  number     on  keyup   function             var el     this               val   Math max  0  el val                  max   parseInt el attr  max              el val isNaN max    val   Math min max  val               lt  script gt   lt style gt  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     lt  style gt

User · Answer

I would typically do something like this  onblur   but it could be attached to any of the events    lt  DOCTYPE html PUBLIC  -  W3C  DTD XHTML 1 0 Transitional  EN   http   www w3 org TR xhtml1 DTD xhtml1-transitional dtd  gt   lt html xmlns  http   www w3 org 1999 xhtml  gt   lt head gt   lt meta http-equiv  Content-Type  content  text html  charset utf-8    gt   lt title gt Untitled Document lt  title gt    lt script type  text javascript  gt  function CheckNo sender       if  isNaN sender value            if sender value  gt  100               sender value   100          if sender value  lt  0               sender value   0       else            sender value   0            lt  script gt   lt  head gt    lt body gt   lt input type  text  onblur  CheckNo this     gt   lt  body gt   lt  html gt

User · Answer

It depends on the kind of numbers and what you will allow   Handling numbers with decimals is more difficult than simple integers   Handling situations where multiple cultures are allowed is more complicated again   The basics are these    Handle the  keypress  event for the text box   When a character which is not allowed has been pressed  cancel further processing of the event so the browser doesn t add it to the textbox  While handling  keypress   it is often useful to simple create the potential new string based on the key that was pressed   If the string is a valid number  allow the kepress   Otherwise  toss the keypress   This can greatly simplify some of the work  Potentially handle the  keydown  event if you re concerned with keys that  keypress  doesn t handle

[javascript] Maximum and minimum values in a textbox

Examples related to javascript

Examples related to html