当我调用 javascript function 时，html onkeypress 的操作很奇怪，如何正确读取此处的输入？

Question

我们正在制作一个网站来玩和解决数独问题。 为此，我们希望在您按下数字时运行 javascript function。 但是 onkeypress 调用表现得很奇怪。 它确实提供了您要更改的单元格编号，但在按键时看不到输入本身，除非您按两次。 （？）或输入。 它如何同时正常工作？ 如果您想尝试，也可以在这里找到： www.patternsinwords.com/sudoku 。 亲切的问候， Jaap

        
<html>
<head>
<script type="text/javascript">
function myFunction(val) {
    var x = document.getElementById(val).value;
    document.getElementById("alerts").innerHTML = "You changed " + x + " on cell " + (val+1);

}
</script>
<style> 
input[type=text] {
    width: 20px;
    border: none;
    font-size: 20px;
    align: center;
}
table{
    border-collapse: collapse;
}
div{
    align: center;
}
td:nth-child(3) {border-right: 2px solid black;}
td:nth-child(6) {border-right: 2px solid black;}
tr:nth-child(3) {border-bottom: 2px solid black;}
tr:nth-child(6) {border-bottom: 2px solid black;}
</style>
</head>
<body>
<center>
<?php
    echo '<br><table border="3"><tr>';
    $vertical = 0;
    for ($i=0;$i<=80;$i++){
        if ($i%9==0 && $i>0){
            $vertical++;
            echo '</tr><tr>';
        }
        echo '<td align="center" width="50" height="50"><input type="text" autocomplete="off" maxlength="1" id="'.$i.'" onkeypress="myFunction('.$i.')">';
    }
    echo '</tr></table>';
    echo '<br><div id="alerts"></div>';
?>
</center>
</body>
</html>

Answer 1

由于事件顺序，您无法从输入元素中获取新值。 Keypress 事件（最好使用 keydown 或 input 事件，因为不推荐使用 keypress 事件）在输入元素中设置的值之前触发。 使用按键事件，您只能获得先前设置的输入值。

要解决问题，您可以使用“输入”事件：

echo '<td align="center" width="50" height="50"><input type="text" autocomplete="off" maxlength="1" id="'.$i.'" oninput="myFunction('.$i.')"></td>';

另一种方法是直接从事件中获取输入值。 在我看来，这是最好的方式，因为您不必访问 DOM 即可获得已有的价值。 如果您更喜欢使用基于事件的案例，您应该将 function 更改为

function myFunction(e, cellId) {
    var key = e.key;
    document.getElementById("alerts").innerHTML = "You changed " + key + " on cell " + (cellId+1);
}

和单元格标记到

echo '<td align="center" width="50" height="50"><input type="text" autocomplete="off" maxlength="1" id="'.$i.'" onkdown="myFunction(event, '.$i.')"></td>';