基于 Javascript 中的用户输入自动更新表格单元格答案

【问题标题】：Auto-Update table cell based on user input in Javascript基于 Javascript 中的用户输入自动更新表格单元格
【发布时间】：2017-12-20 02:06:41
【问题描述】：

我正在尝试根据另一个表格单元格中的更改自动更新表格单元格。用户有名字、姓氏和用户名。用户名由首字母+姓氏组成。我当前的代码是：

<html>
  <head>
    <script type = "text/javascript">
      function updateUsername(){
        var firstname = document.getElementById("tdFirstname").firstChild.firstChild.nodeValue;
        var lastname = document.getElementById("tdLastname").firstChild.firstChild.nodeValue;
        var username = document.getElementById("tdUsername").innerHTML = firstname + lastname;
      }
    </script>
  </head>
  <body>
    <table id = 'confirm'>
      <tr>
        <th>Firstname</th>
        <td id = 'tdFirstname'>
          <div onkeypress = 'updateUsername()' contentEditable>
            Johnny
          </div>
        </td>
      </tr>
      <tr>
        <th>Lastname</th>
        <td id = 'tdLastname'>
          <div onkeypress = 'updateUsername()' contentEditable>
            Sppleseed
          </div>
        </td>
      </tr>
      <tr>
        <th>Username</th>
        <td id = 'tdUsername'>
          JSPPLESEED
        </td>
      </tr>
    </table>
  </body>
</html>

代码有效（只是将名字和姓氏放在一起，还不担心第一个首字母），但它后面有一个字母。输入新字符后它不会更新，这意味着如果我将姓氏更新为 Appleseed（应该是这样），只更改一个字母没有效果（用户名仍然是 Sppleseed），但是当按下第二个键时，它会换成苹果籽。我的代码有问题吗？还是我错过了在输入/删除新字符后我应该更新的内容。这很令人沮丧。

【问题讨论】：

标签： javascript html-table cell auto-update onkeypress

【解决方案1】：

尝试使用onkeyup 而不是onkeypress。

keyup 事件在“当用户释放一个键时，在该键的默认操作已经执行后”触发。

http://www.quirksmode.org/dom/events/keys.html

【讨论】：