Вариант раз - следим за тем, что вводит пользователь. Если значение некорректное - показываем соответствующее сообщение:
<div class="power-of-10">
<input value="1">
<div>значение должно быть степенью 10: 1, 10, 100,... или 0.1, 0.01, 0.001...</div>
</div>
.power-of-10 > div {
display: none;
}
.power-of-10.error > div {
display: block;
}
.power-of-10.error > input {
background: #faa;
}
const reg = /^(10*|0[.,]0*1)$/;
document.querySelector('.power-of-10 > input').addEventListener('input', e => {
e.target.parentNode.classList.toggle(
'error',
!reg.test(e.target.value)
);
});
Вариант два - лишаем пользователя возможности ввести некорректное значение. Блокируем поле ввода, изменяем значение посредством кнопок и колеса прокрутки:
<button data-step="+1">+</button>
<button data-step="-1">-</button>
<input readonly>
const input = document.querySelector('input');
let pow = 0;
const updateValue = step =>
input.value = (pow += step) < 0
? '0.' + '0'.repeat(~pow) + '1'
: '1' + '0'.repeat(pow);
document.querySelectorAll('[data-step]').forEach(function(n) {
n.addEventListener('click', this);
}, e => updateValue(+e.target.dataset.step));
input.addEventListener('wheel', e => {
e.preventDefault();
updateValue(-Math.sign(e.deltaY));
});
updateValue(0);
