JSFiddle - React, Tailwind, and code Playground

by huuzoo

HTML

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

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 = '';
    document.getElementById('alert').innerHTML = '4桁以内の数値を入力してください。';
  } else {
  	document.getElementById('alert').innerHTML = 'OKです。';  
  }
  document.getElementById('output').innerHTML = form_value;
}