Restrict values in HTML input field at time of input?

It looks like Google Chrome will enforce the min/max values when you use a submit button on the form.

I've updated your sample, with 3 submit buttons (labelled accordingly)... one will enforce the validation, the others will show the errors, but submit anyway.

http://jsfiddle.net/uatxcvzp/12/

 <form>
    <input type="number" min="1" max="9" required />
    <input type="number" min="1" max="9" required />
    <input type="number" min="1" max="9" required />
    <input type="number" min="1" max="9" required />
    <br/>
    <br/><input type="button" value="Submit With No Forced Validation" onclick="this.form.submit();"/>
    <br/><input type="submit" value="Submit With No Forced Validation" onclick="this.form.submit();"/>
    <br/><input type="submit" value="Submit With Forced Validation"/>
</form>

In Firefox, the validation occurs on field blur, highlighting the field border in red and showing a tooltip explaining the error on hover. Using either submit style will halt and require that the errors are fixed.

In IE10, only the native submit button will force validation when you try to submit the form.

In Safari on iOS9.1, it looks like it is completely ignored regardless of the submit button/code style used. :-(

try this:

$("input[type='number']").change(function() {
  var $this = $(this);
  var val = $this.val();
  var span = $(".error");
  if (val > 9 || val < 1) {
    
    span.text("value must be between 1 and 9");
  }else{
   span.text("");
  }
});

input {
  width: 40px;
  height: 40px;
  font-size: 1.4em;
}
.error {
  color: red;
  font-style: italic;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>
<input type="number" min=1 max=9 required />
<input type="number" min=1 max=9 required />
<input type="number" min=1 max=9 required />
<input type="number" min=1 max=9 required />
<span class="error"></span>

you can try the following code:

<input type="number" min=1 max=9 required onKeyDown="if(this.value.length==1) return false;" />

thy this its work for me

<input type="text" name="number" minlength='1' maxlength="9" required>

It looks like it's not natively possible as an uncontrolled component and it needs to become a controlled component - either writing javascript/jQuery manually, or using a library.

If using React, you can use something like react-hook-form and the code would look something like below. Specifically, see the age input.

Full documentation is here: https://react-hook-form.com/api/useform/register

import * as React from "react";
import { useForm } from "react-hook-form";

export default function App() {
  const { register, handleSubmit } = useForm({
    defaultValues: {
      firstName: '',
      lastName: '',
      age: '',
    }
  });

  return (
    <form onSubmit={handleSubmit(console.log)}>
      <input {...register("firstName", { required: true })} placeholder="First name" />
      <input {...register("lastName", { minLength: 2 })} placeholder="Last name" />

      <input
        {...register("age", {
          validate: {
            positive: v => parseInt(v) > 0,
            lessThan200: v => parseInt(v) < 200,
          }
        })}
      />

      <input type="submit" />
    </form>
  );
}