<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Year Input Validation</title>
<style>
input, select {
background-color: hsl(215,100%,90%);
color: hsl(215,100%,40%);
border: 1px solid hsl(215,100%,40%);
outline: none;
}
</style>
</head>
<body>
<div id="inp">
<input type="text" size="4" id="desiredYear" />
<select id="desiredEra">
<option>до н.э.</option>
<option selected>н.э.</option>
</select>
</div>
<script type="text/javascript">
var input = document.getElementById('desiredYear');
var select = document.getElementById('desiredEra');
var inputTimeout;
input.addEventListener('input', (e) => {
clearTimeout(inputTimeout);
changeInputType('number');
inputTimeout = setTimeout(() => {
processInput(e.target.value);
}, 800);
});
input.addEventListener('focusout', () => {
changeInputType('text');
});
function changeInputType(type) {
input.type = type;
}
function processInput(value) {
// Удаление пробелов
value = value.trim();
// Ограничение на ввод символов
if (!/^[\\d\\+\\-]*$/.test(value)) {
input.value = '';
return;
}
// Удаление лишних символов
if (value.match(/[\\+\\-]{2,}/)) {
input.value = value.replace(/[\\+\\-]{2,}/g, '');
return;
}
// Проверка на длину
if (/^\\d+$/.test(value) && value.length > 6) {
input.value = value.slice(0, 6);
return;
} else if (/^[\\+\\-]?\\d+$/.test(value) && value.length > 7) {
input.value = value.slice(0, 7);
return;
}
// Удаление знаков в начале
if (/^[\\+\\-]/.test(value)) {
value = value.slice(1);
}
// Удаление ведущих нулей
value = value.replace(/^0+/, '');
// Если всё равно пусто, установить "1"
if (value === '' || value === '0') {
input.value = '1';
select.selectedIndex = 0; // "до н.э."
} else {
input.value = value;
}
// Логика для выбора века
if (parseInt(input.value) < 0) {
select.selectedIndex = 0; // "до н.э."
input.value = Math.abs(parseInt(input.value)).toString();
} else {
select.selectedIndex = 1; // "н.э."
input.value = parseInt(input.value).toString();
}
}
</script>
</body>
</html>