输入框按下左方向键后selectionStart值与光标位置不匹配的问题咨询

大家好，我遇到了一个关于输入框光标和selectionStart属性不匹配的奇怪问题，下面是详细的复现步骤和现象：

问题复现步骤 #

• 我有一个内容为test的输入框，点击内容末尾让它获得焦点
• 焦点激活后，光标停在了最后一个字符t的后面
• 这时候查看输入框的selectionStart属性，值是4，这显然是正确的（因为"test"一共4个字符，索引从0开始）
• 接着我按下键盘的左方向键，按道理光标应该往左移动一位，selectionStart的值应该变成3才对，但实际它还是4，这就不对了

奇怪的现象总结 #

更离谱的是，当光标在内容末尾时，selectionStart是4；按下左方向键后，肉眼能看到光标移到了倒数第二个字符s的后面，但selectionStart居然还是4——等于说光标在这两个不同的位置时，selectionStart的值完全一样，这太不符合预期了。

我的疑问 #

想请教各位大佬：

1. 有没有办法能获取到和实际光标位置匹配的selectionStart值？
2. 这是浏览器的bug吗？为什么会出现这种情况呢？

测试代码 #

我写了一段简单的测试代码，大家可以帮忙看看：

JavaScript代码

const element = document.getElementById('test');
element.addEventListener('keydown', (event) => {
    console.log(`Keydown. Selection start: ${element.selectionStart}`);
    console.log(`Keydown. Selection end: ${element.selectionEnd}`);
})

HTML代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Test</title>

    <meta name="viewport"
          id="viewport-meta-tag"
          content="width=device-width, initial-scale=1.0">
</head>
<body>
    <input id="test"
           type="text"
           value="test">

</body>
</html>

备注：内容来源于stack exchange，提问作者Andrii Kovalenko