JSFiddle - React, Tailwind, and code Playground

by huuzoo

HTML

<input type="tel" id="form" maxlength="4" onchange="inputCheck()" pattern="[0-9]{1,4}">
<span class="error">数値以外は入力できません。</span>

CSS

.error { display: none; }

input:invalid + .error {
  display: block;
  color: red;
}

JavaScript

function inputCheck () {
	var form = document.getElementById("form");
	var form_value = form.value;
  
  if (form_value.match(/[0-9]{1,4}/g) != form_value ) {
    form.value = '';
  }
}