How to stop keyboard entry on HTML input='date' to avoid massively out of range dates

user_2446245 0
Viewed 322

The code:

<input type="date">

Allows for users to enter any sort of ridiculous dates. For example, a user can set a future date of 01/01/123456 It seems to revert to a max year of 275760 if you try and enter 999999.

I was looking for a way to limit keyboard entry to force users to use the dropdown function to avoid this.

So far, the best I've been able to do is limit the date range of the input using max, which stops the typed year from being able to exceed the same amount of characters as the number of charcters you set for the year you select.

I though about setting this to 3000-01-01 as the max date to keep things under control. This would mean the user could only select from the dropdown dates until that date, but could manually enter the year up to 9999.

<input type="date" max='3000-01-01'>

Is there a way to lock keyboard entry whilst maintaining dropdown functionality?

html javascript
2 Answers

You can use the keydown event and event.preventDefault() like so:

document.getElementById('date-input').addEventListener('keydown', function (event) {
  event.preventDefault()
})
<input id='date-input' type='date'>

Or better yet, you can use inline HTML:

<input id='date-input' type='date' onkeydown='event.preventDefault()'>

user_129845670

To limit the keyboard entry of an input field, you need to override the keydown event with JavaScript.

Assuming it has an I'd of "inp", then in JS

` inp.onkeydown= e=> { If (!verify(inp.value)) { e.preventDefault () return false } }

function verify (str) { return parseInt(str) < 3000 }

`

user_20168310
Related