JSFiddle - React, Tailwind, and code Playground

by huuzoo

HTML

<input type="text" id="form" maxlength="4" onchange="inputCheck()">
<div class="frame">入力内容：<span id="output"></span></div>
<div id="alert"></div>

JavaScript

function inputCheck () {
	var form = document.getElementById("form");
	var form_value = form.value;
  
  if (form_value.match(/[0-9]{1,4}/g) != form_value ) {
  	document.getElementById('alert').innerHTML = '4桁以内の数値を入力してください。';
  form.value = '';
} else {
  	document.getElementById('alert').innerHTML = 'OKです。';  
  }
  
  document.getElementById('output').innerHTML = form_value;
}