Всем добрый вечер. Подскажите пожалуйста кто знает как работать адекватно с input) Я написал вот такой пример таймлайна. Я хочу сделать так чтобы я мог задавать значение в ручную в timeBlock через input type text с регулярным выражением который бы мне позволял передвигать ползунок опираясь на введенное значение, а если происходит Drag and Drop то в Input отображется текущее время при передвижении. В input вводится только числа в таком паттерне 00:00 которые не могут превышать максимальное время таймлайна и при изменении времени ":" - данный знак я стереть не могу. Я знаю что можно это сделать через регулярные выражения, но перерыв интернет не смог найти адекватных примеров.
const timeLine = document.getElementById('timeline').getBoundingClientRect();
const timeBLock = document.getElementById('timeBLock');
const timeInput = document.getElementById('timeInput');
const marker = document.getElementById('marker');
const oneHourInSeconds = 3600;
const xAxisTimeRange = [0, 100];
marker.onmousedown = (e) => {
e.preventDefault();
e.stopPropagation();
document.onmousemove = (e) => {
const pos = calcInRange(0, e.pageX - timeLine.left, timeLine.width);
marker.style.left = '' + pos + 'px';
timeBLock.style.left = '' + pos - 17 + 'px';
const ratio = getRatio(pos, timeLine.width);
const time = getTime(ratio, xAxisTimeRange[1]);
timeInput.value = parseTime(time);
}
document.onmouseup = (e) => {
document.onmousemove = null;
document.onmouseup = null;
}
};
const getRatio = (value, rangeWidth) => {
return value / rangeWidth;
}
const getTime = (ratio, rangeTime) => {
return ratio * rangeTime;
}
const calcInRange = (minRange, value, maxRange) => {
return Math.max(Math.min(value, maxRange), minRange);
}
const parseTime = (second) => {
let formatted = new Date(second * 1000).toUTCString().split(/ /)[4];
if (second < oneHourInSeconds) {
formatted = formatted.slice(3);
} else if (second >= oneHourInSeconds) {
formatted = formatted.slice(1);
}
return formatted;
}
.timeline {
position: relative;
margin: 40px 10px;
width: 300px;
height: 40px;
background-color: grey;
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
}
.line {
position: absolute;
width: 100%;
height: 10px;
background-color: #ffffff;
}
.marker {
left: 0;
position: absolute;
height: 100%;
width: 10px;
background-color: #000000;
}
.timeBLock {
color: white;
left: -17px;
position: absolute;
bottom: 50px;
width: 36px;
height: 15px;
background-color: #333333;
}
input[type=text] {
width: 36px;
}
<div id="timeline" class="timeline">
<div class="line"></div>
<div id="timeBLock" class="timeBLock">
<input id="timeInput" type="text">
</div>
<div id="marker" class="marker"></div>
</div>