-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
48 lines (42 loc) · 1.53 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Input Lag Demo</title>
<script>
</script>
</head>
<body>
<textarea id="textArea" rows="10" cols="100"></textarea>
<div>
<label for="delaySlider">Delay: <span id="delayLabel">220</span>ms</label>
<input type="range" id="delaySlider" min="0" max="1000" step="10" value="220">
</div>
<script>
const textArea = document.getElementById("textArea");
const delaySlider = document.getElementById('delaySlider');
const delayLabel = document.getElementById('delayLabel');
let delay = parseInt(delaySlider.value);
function delayInput(event) {
event.preventDefault();
const char = event.key;
setTimeout(() => {
const currentValue = textArea.value;
const startPosition = textArea.selectionStart;
const endPosition = textArea.selectionEnd;
if (event.key === 'Enter') {
textArea.value = textArea.value.substring(0, startPosition) + '\n' + textArea.value.substring(endPosition);
} else {
textArea.value = textArea.value.substring(0, startPosition) + char + textArea.value.substring(endPosition);
}
textArea.selectionStart = textArea.selectionEnd = startPosition + 1;
}, delay);
}
textArea.addEventListener('keypress', delayInput);
delaySlider.addEventListener('input', (event) => {
delay = parseInt(event.target.value);
delayLabel.textContent = delay;
});
</script>
</body>
</html>