Follow Us on Twitter

Enforce the HTML5 max attribute of input items with JavaScript

by Patrick Sinke on February 10, 2018 · 1 comment

The HTML5 max and min attribute on input items

The max attribute is introduced in HTML5 and specifies the maximum value for an <input> element. Unfortunately, it doesn’t enforce the maximum value entered when typing in numbers as you might expect.

The syntax for the HTML element is as follows:

<input max=”number|date“>

With a small JavaScript function it’s possible to make sure no value larger than the max value (or smaller than the min value) may be entered. Just put the following code in your $(document).ready(function) {}:

   $(document).on('keyup', '.myInputItem', function () {
      if (parseInt($(this).val()) >= $(this).attr('max'))
      {
         $(this).val($(this).attr('max'));
      }
   });

The function fires on the keyup event. The if statement compares the value of the input item with the max value. When it is higher, it will replace the contents with the max value.

 

Enforce the HTML5 max attribute of input items with JavaScript, 5.0 out of 5 based on 1 rating
Ratings:
VN:D [1.9.22_1171]
Rating: 5.0/5 (1 vote cast)
Tags: , , ,

{ 1 comment… read it below or add one }

quicken error cc-502 November 5, 2018 at 12:42 pm

HTML is one of the most useful languages. There are lots of additional features which have been discussed here nicely.

Reply

Leave a Comment

 

Previous post:

Next post:

About Whitehorses
Company profile
Services
Technology

Whitehorses website

Home page
Whitebooks
Jobs

Follow us
Blog post RSS
Comment RSS
Twitter