为什么输入对象的值属性不保存值？

Question

在第一种方法中，使用 KeyBoardEvent 实例，下面的事件处理程序 f 可以检索键盘按键后的字符，如下所示：

<form action="#" id="sampForm" >
            <input id='charInput' type='text'>
            <p id="KeyData">Key press data here</p>
</form><br>

document.getElementById('charInput').onkeypress = f;

function f(event) {
  var char = getChar(event || window.event)
  if (!char) return false; // Special Key Pressed
          document.getElementById('keyData').innerHTML = char + " was pressed";
                          return true;
}       

function getChar(event) {
  // event.which returns the key pressed
  if (event.which == null) {
        // Return the char if not a special character
        return String.fromCharCode(event.keyCode); // IE
  } else if (event.which!=0 && event.charCode!=0) {
        return String.fromCharCode(event.which);   // Other Browsers
  } else {
        return null; // Special Key Pressed
  }
}

在第二种方法中，使用 HTMLInputElement 实例的 value 属性，下面的回调函数 f 无法检索按键后的字符，

<form action="#" id="sampForm" >
            <input id='charInput' type='text'>
            <p id="KeyData">Key press data here</p>
</form><br>

document.getElementById('charInput').onkeypress = f;

function f(){
    document.getElementById('KeyData').innerHTML =  document.getElementById('charInput').value  + 'is pressed';
    return true;
}

在第二种方法中，为什么 document.getElementById('charInput').value 是空字符串，当我按下第一个键盘字符时？这个问题在事件处理方法中是如何解决的？

注：w3.org/TR/DOM-Level-2-Events/events.html --实现Event接口的对象通常作为第一个参数传递给事件处理器。在上面的代码中，我在第二种方法中分配了回调而不是事件处理器。因为没有文档说 onkeypress 属性值必须是事件处理程序。

Answer 1

您缺少 function f

的左括号

function f(){
 // your code
}

Answer 2

代码没问题。函数 f() 缺少括号“{”。还要确保此代码被 <script> 标记包围。还使用 onkeyup 而不是 onkeypress。

Answer 3

onkeypress事件在用户按下键盘上的键时发生。在那个时间点，用户输入的键值是 not put in the textbox yet。所以第一次输入键时，document.getElementId('charInput').value returns 文本框的 current 值为空。下次您按下一个键时，它将显示在文本框中输入的第一个值。请注意 document.getElementId('charInput').value 显示文本框的当前值而不是按下的键字符。此外，函数 f() 后应该有一个开头，所以它应该是：

function f() {
    document.getElementById('KeyData').innerHTML = document.getElementById('charInput').value  + 'is the content of charInput';
    return true;
}

为什么输入对象的值属性不保存值？

Why value property of input object does not hold value?

javascript

event-handling

keyboard-events

dom-events

为什么输入对象的值 属性 不保存值？

Why value property of input object does not hold value?

javascript

event-handling

keyboard-events

dom-events

为什么输入对象的值属性不保存值？