Follow Us on Twitter

Enforce the HTML5 max attribute of input items with JavaScript

by Patrick Sinke on February 10, 2018 · 15 comments

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: , , ,

{ 15 comments… read them below or add one }

Outlook Error Code 550 July 12, 2019 at 7:29 am

VERY HELPFUL KEEP WRITING AND SHARING THESE BLOG.

Reply

Fix HP BIOHD Error Code 8 July 19, 2019 at 1:13 pm

Thanks for sharing thats article are amazing for more information of tecnology visite our website click here Fix HP BIOHD Error Code 8

Reply

Fix 79 Service Error HP Printer July 31, 2019 at 9:29 am

Hi there,

Nice blog. I found this blog very useful. Your blog will be very beneficial for everyone. I have bookmarked your website. Please keep your effort continuous and keep providing us your valuable information and suggestions.
Also visit blog posted by Robin.

Visit Now hpsupport365

Reply

hp printer error 0x610000f6 August 1, 2019 at 12:44 pm

Thanks for sharing thats article are amazing for more information of tecnology visite our website click here hp printer error 0x610000f6

Reply

adobe flash player error code 1013 August 9, 2019 at 12:11 pm

Great Post about Tracking Trends. Keep up the good work sir. Thanks for sharing If you facing any problem regarding adobe flash player error code 1013

Reply

epson error code 0x69 August 9, 2019 at 1:09 pm

Great information you shared through this blog. Keep it up and best of luck for your future blogs and posts.epson error code 0x69

Reply

hp error code 0xc0000034 August 19, 2019 at 11:35 am

Great Post about Tracking Trends. Keep up the good work sir. Thanks for sharing hp error code 0xc0000034

Reply

adobe flash player connection error August 20, 2019 at 2:08 pm

Great Post about Tracking Trends. Keep up the good work sir. Thanks for sharing If you facing any problem regarding adobe flash player connection error

Reply

block email addresses in aol August 23, 2019 at 11:52 am

Thanks for sharing this valuable content with us this work is appreciable and I have bookmarked your website.

Reply

Fix Lexmark printer error code 900 August 26, 2019 at 10:53 am

Thanks for sharing this valuable content with us this work is appreciable and I have bookmarked your website.

Reply

Steps To Fix Safari Can’t Establish A Secure Connection September 4, 2019 at 1:20 pm

Excellent and nice post. This is such a great resource that you are providing and you give it away for free. I love seeing that understands the value. I’m glad to have found this posting as its such an interesting one.

Reply

epson error code 0xea September 9, 2019 at 12:48 pm

Thanks for sharing this valuable content with us this work is appreciable and I have bookmarked your website.

Reply

Epson Wireless Printer Setup September 21, 2019 at 11:37 am

Do you want to set up Epson printer? Are you facing Epson wireless printer setup issue? If yes, we can help you. We have a dedicated team of trained printer technicians, who are technically proficient to set up Epson printer in the right technical ways. Do you have low budget to give for the services? So, don’t worry more, our techies know the technical ways better to set up your Epson printer in the right technical ways.

Reply

www.epson.com/support September 27, 2019 at 7:50 am

Epson printers are famous among the others one for its advanced printing technology that enables it to deliver the high-quality of printouts with great speed. Even though using advanced technology, glitches appear which couldn’t be unavoidable. Generally, helpless users complain about technical errors that they face on Epson printer and seek for instant assistance. In such point, it is recommended to tap on the link epson.com/support as team of highly proficient staff has collected all the basic information related to Epson printer which will helpful for you in terminating the printer related hurdles in an effort-free manner.

Reply

Best Assignment Writing Services November 12, 2019 at 3:26 pm

Acquiring Custom Assignment Writing Services from a credible firm like Legitimate Assignment Writing Company ensures that you attain excellence, especially in your College Assignment Writing Services endeavors, which can be challenging in many instances.

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