JSFiddle - React, Tailwind, and code Playground

by rgthree

HTML

<div class="fake-num-container">
  <input type="number" class="num-input">
  <input type="text" class="text-input" name="mobile_form_hours" pattern="\d{1,2}[\.:]\d{1,2}" placeholder="Enter a time, such as 3:45 or 2.5" required>
</div>

<br><br>Number [0-9]*<br>
<input type="number" pattern="[0-9]*" />
<br><br>Number [0-9\.\:]*<br>
<input type="number" pattern="[0-9\.\:]*" />
<br><br>Text [0-9]*<br>
<input type="text" pattern="[0-9]*" />
<br><br>Text [0-9\.\:]*<br>
<input type="text" pattern="[0-9\.\:]*" />

CSS

.fake-num-container {
  width: 200px;
  height: 20px;
  position: relative;
}
.num-input,
.text-input{
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background: #000;
  z-index: 2;
}
.num-input {
  opacity: 0.5;
  z-index: 3;
}
input {width: 200px; border: 1px solid #ccc; background: #fff;}
input:valid {border-color: green; background: #eeffee;}
input:invalid {border-color: red; background: #ffeeee;}

JavaScript

var numInput = document.querySelector('.num-input');
var textInput = document.querySelector('.text-input');

numInput.addEventListener('focus', function() {
	numInput.style.zIndex = 1;
	setTimeout(function() {
		textInput.focus();
  }, 1000);
});
textInput.addEventListener('blur', function() {
	numInput.style.zIndex = 3;
});