JSFiddle - React, Tailwind, and code Playground

HTML

<input id="loginInput" placeholder="s1234567" pattern="^[A-Za-z]{1}[0-9]{7}" oninput="myFunction()">

JavaScript

var inputBox = document.getElementById('loginInput');
console.log("script is running");
  
function myFunction() {
console.log("inside change");
  var content = inputBox.value;
  var pattern = new RegExp(/^([A-Za-z]{1})*[0-9]{0,7}/);
	var isMatching = pattern.test(content);
  console.log("is matching", isMatching);
  if(!isMatching){
  	inputBox.value = content.slice(0, content.length - 1);
  }
}