提问人：Jaap van der Heijden 提问时间：1/29/2022 更新时间：1/29/2022 访问量：49
当我调用 javascript 函数时，html onkeypress 表现得很奇怪，如何正确读取此处的输入？
The html onkeypress is acting weird when I call a javascript function, How to properly read the input here?
问：
我们正在制作一个网站来玩和解决数独问题。为此，我们想要一个 javascript 函数，当你按下一个数字时运行。但是 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>
答：
0赞
Kitta
1/29/2022
#1
由于事件顺序，无法从输入元素中获取新值。按键事件（最好使用 keydown 或 input 事件，因为按键已弃用事件）在输入元素中设置的值之前触发。使用按键事件，您只能获得先前设置的输入值。
要解决这个问题，你可以使用'input'事件：
echo '<td align="center" width="50" height="50"><input type="text" autocomplete="off" maxlength="1" id="'.$i.'" oninput="myFunction('.$i.')"></td>';
另一种方法是直接从事件中获取输入值。在我看来，这是最好的方法，因为你不必访问DOM来获得你已经拥有的价值。如果您更喜欢使用基于事件的情况，则应将函数更改为
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>';
评论
0赞
Jaap van der Heijden
1/30/2022
你好！非常感谢您的迅速回复！我立即尝试了最佳选择，当我将 onkdown 更改为 onkeydown 时，它突然起作用了！你笑，你学习，谢谢，花了我太久了！雅普
评论