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

问题描述 投票:0回答:1

我正在尝试根据另一个表格单元格中的更改自动更新表格单元格。用户具有名字,姓氏和用户名。用户名由第一个初始名+姓氏组成。我目前的代码是:

<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),但是当按下第二个键时,它会换成Appleseed。我的代码有问题吗?或者我错过了在输入/删除新字符后我必须更新的内容。这非常令人沮丧。

javascript html-table cell auto-update onkeypress
1个回答
0
投票

尝试使用onkeyup而不是onkeypress

当用户在执行该密钥的默认操作后释放密钥时,将触发keyup事件。

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

© www.soinside.com 2019 - 2024. All rights reserved.