HTML 5 Input Type='Date' Disable Keyboard Input

HTML 5 Input type='date' disable keyboard input

You can use onkeydown and prevent user from entering the value.

<input type="date" onkeydown="return false" />

How can I disable keyboard input on an html input of type number? What about in react or material-ui?

This seems like a basic question, but I was surprised to not be able to find the answer anywhere, so I'm providing one here.

The key in both cases is to capture the onkeydown event and run its method preventDefault().

Vanilla HTML and javascript

  <input type="number" min="0" max="100" step="2" value="10"
    onkeydown="preventKeyboardInput(event)" />

  <script>
    function preventKeyboardInput(event) {
      event.preventDefault();
    }
  </script>

React

  <input
    type="number"
    min={0}
    max={100}
    defaultValue={10}
    step={2}
    onKeyDown={(event) => {
      event.preventDefault();
    }}
  /> 

Material-UI

Material-UI's <TextField> is a wrapper around react's <input>, so all you need to do is pass onKeyDown down via inputProps, which you are already using to pass min, max, and defaultValue.

  const [value, setValue] = useState(10);

  return (
    <React.Fragment>
      <TextField
        name="name"
        type="number"
        label="label"
        inputProps={{
          min: 0,
          max: 100,
          step: 2,
          onKeyDown: (event) => {
             event.preventDefault();
          },
        }}
        defaultValue={value}
        onChange={(event) => {
          setValue(Number(event.target.value));
        }}
      />
    </React.Fragment>
  ); 

---

UPDATE: I've discovered roundabout that this breaks input boxes on touch devices, or at the very least iOS and iPadOS, neither of which display or allow input from spinners, which is probably why it was downvoted in the first place. Caveat emptor for anyone wanting to use this method.

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

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'>

Disable Keyboard in Input Textfield

You should disable keyboard on your input like this:

$(function() {
   $('#datepicker').keypress(function(event) {
       event.preventDefault();
       return false;
   });
});

And Here is a working fiddle.

How to disable to type in HTML input date when choosing past dates?

You can disable keyboard onkeydown event.

$(document).ready(function() { //DISABLED PAST DATES IN APPOINTMENT DATE
  var dateToday = new Date();
  var month = dateToday.getMonth() + 1;
  var day = dateToday.getDate();
  var year = dateToday.getFullYear();

  if (month < 10)
    month = '0' + month.toString();
  if (day < 10)
    day = '0' + day.toString();

  var maxDate = year + '-' + month + '-' + day;

  $('#txt-appoint_date').attr('min', maxDate);
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="date" id="txt-appoint_date" onkeydown="return false"/>

Disable writing in input type number HTML5

If you are able/allowed to use jQuery, you can disable keypress on the type='number'.

$("[type='number']").keypress(function (evt) {
    evt.preventDefault();
});

This allows you to use up and down arrows on the input, but doesn't allow keyboard input.

Bootstrap Datepicker (avoid text input or restrict manual input)

Override the key events on the input control.

<input onkeydown="return false" ... />

Remove default text/placeholder present in html5 input element of type=date

::-webkit-datetime-edit-year-field:not([aria-valuenow]),
::-webkit-datetime-edit-month-field:not([aria-valuenow]),
::-webkit-datetime-edit-day-field:not([aria-valuenow]) {
    color: transparent;
}

Is it possible to disable input=time clear button

Your straight-forward solution for all up-to-date browsers could be:

input[type="time"]::-webkit-clear-button {
    display: none;
}

If you're willing to specify it only for Internet Explorer 10 you should style it with

::-ms-clear pseudo-element:

input[type="time"]::-ms-clear {
    display: none;
}

You could also do it using width and height for all input elements:

input::-ms-clear {
    width: 0;
    height: 0;
}

If you want to apply it only to input with text type:

input[type=text]::-ms-clear {
    display: none;
}

EDIT 1:

If it doesn't work, then you must make sure that you haven't selected browser/document mode other than IE10/Standard in F12 tools!

EDIT 2:

Additionally you might find other pseudo-controls interesting:

/* Hide the cancel button */
::-webkit-search-cancel-button { 
    -webkit-appearance: none; 
}

/* Hide the magnifying glass */
::-webkit-search-results-button {
     -webkit-appearance: none; 
}

/* Remove the rounded corners */
input[type=search] { 
    -webkit-appearance: none; 
}

---

Related Topics