Here's the code snippet
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Timer Input Only</title>
<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/4.6.0/css/bootstrap.min.css" rel="stylesheet">
<style>
body {
background: #f8f9fa;
padding: 20px;
font-family: Arial, sans-serif;
}
.timer-container {
max-width: 400px;
margin: 0 auto;
background: white;
padding: 20px;
border-radius: 10px;
box-shadow: 0 2px 10px rgba(0,0,0,0.1);
text-align: center;
}
.time-input-container {
display: inline-flex;
align-items: center;
background: white;
border: 1px solid #ced4da;
border-radius: 0.25rem;
padding: 0.375rem 0.75rem;
}
.time-input {
border: none;
outline: none;
text-align: center;
font-weight: bold;
font-size: 1.1rem;
background: transparent;
width: auto;
min-width: 30px;
}
.time-input#minutes,
.time-input#seconds {
width: 30px;
}
.time-separator {
font-weight: bold;
font-size: 1.1rem;
color: #495057;
margin: 0 3px;
}
</style>
</head>
<body>
<div class="timer-container">
<div class="time-input-container">
<input type="text" class="time-input" inputmode="numeric" id="hours" name="hours" value="00">
<span class="time-separator">:</span>
<input type="text" class="time-input" inputmode="numeric" id="minutes" name="minutes" value="00" maxlength="2">
<span class="time-separator">:</span>
<input type="text" class="time-input" inputmode="numeric" id="seconds" name="seconds" value="00" maxlength="2">
</div>
</div>
<script>
const hoursInput = document.getElementById('hours');
const minutesInput = document.getElementById('minutes');
const secondsInput = document.getElementById('seconds');
function resizeHoursInput() {
const temp = document.createElement('span');
temp.style.visibility = 'hidden';
temp.style.position = 'absolute';
temp.style.fontSize = '1.1rem';
temp.style.fontWeight = 'bold';
temp.textContent = hoursInput.value || '00';
document.body.appendChild(temp);
const width = Math.max(30, temp.offsetWidth + 10);
hoursInput.style.width = width + 'px';
document.body.removeChild(temp);
}
[hoursInput, minutesInput, secondsInput].forEach(input => {
input.addEventListener('click', function () {
this.select();
});
input.addEventListener('focus', function () {
this.select();
});
input.addEventListener('input', function () {
let value = this.value.replace(/[^0-9]/g, '');
if (this.id === 'hours') {
this.value = value;
resizeHoursInput();
} else {
if (value.length > 2) value = value.substring(0, 2);
if (parseInt(value) > 59) value = '59';
this.value = value;
}
});
input.addEventListener('blur', function () {
if (this.value === '') {
this.value = '00';
if (this.id === 'hours') resizeHoursInput();
} else if (this.value.length === 1) {
this.value = '0' + this.value;
if (this.id === 'hours') resizeHoursInput();
}
});
});
resizeHoursInput();
</script>
</body>
</html>
