我正在制作一个记忆圆周率的游戏，之前遇到了一个问题并找到了解决方案，但是现在发现这个方案——在达到一定点后删除输入的起始部分——实际上打乱了顺序。例如，我现在设置的是当输入超过10个字符时进行删除，但当我输入到“3.141592653”时，结果显示为“.1415926533”，而不是最后一个数字是“5”。为什么它会不断替换内容并打乱顺序呢？另外，是否有更简单的实现方法呢？我刚接触JavaScript不久，还不了解很多替代方案。代码尚未完成，我已经剪掉了部分内容，不过理论上所有东西都应该能正常工作。
（编辑：有鉴于一些人需要更多关于我通过这种方式试图解决的前一个问题的背景信息，在当前系统中，如果玩家记错了圆周率的顺序，那么整个输入将会重置，但在重置之前，会在错误答案的位置添加正确的数字。然而，一旦超过约29位数时，为了给新数字腾出空间，原本应该向后移动的正确数字并没有显示出来。为了解决这个问题，我决定不使数字向后移动，而是直接删除最前面的一个单位。）
（编辑2）这里的10个单位只是一个占位符，以便我不必键入29个字符来测试其是否有效，我选择了一个足够小以快速测试，同时又足够长可以观察效果的随机数值。
<div>
<input type="text" id="input-field">
</div>
<script>
const input = document.getElementById("input-field");
input.addEventListener("beforeinput", myFunction);
const numbers = "1234567890.".split("");
input.addEventListener("keyup", event => {
const position = event.target.selectionStart;
if (position > 10) {
input.value = input.value.substring(1);
}
});
function myFunction(event) {
if (event.data && !numbers.includes(event.data)) {
event.preventDefault();
} else if (event.data) {
const charno = input.value.length;
if (pi[charno] != event.data) {
input.disabled = true;
event.preventDefault();
function1();
setTimeout(somethingFunction, 2000);
}
}
}
function function1() {
input.value += pi[input.value.length];
}
function somethingFunction() {
input.disabled = false;
input.value = '';
}
// 长串圆周率值在此定义
const pi = '3.14159265358979323846264338327950288419716939937510582097494459...';
</script>
<input type="text" id="input-field">