javascript - 如何访问嵌套在 div 中的表单数据(TypeScript)

Question

在下面的代码中，每次用户在聊天表单的输入字段中输入一些文本数据后按下回车键时，我想访问以表单形式编写的用户数据。您知道如何使用 TypeScript 访问以下文本数据吗？我已经尝试过使用 jQuery，但所有经过测试的代码似乎都不起作用。我是网络开发新手，但非常渴望学习新事物。

<div id="chat-container">

  <div id="search-container">
    <input type="text" placeholder="search" />
  </div>
  <div id="conversation-list">

  </div>
  <div id="new-message-container">
    <a href="#" id="test">+</a>
  </div>
  <div id="chat-title">

  </div>
  <div id="chat-message-title">

  </div>
  <div id="chat-form">
    <input id="chat-form" type="text" placeholder="Type a message!" />
  </div>
  
</div>

Answer 1

首先，您应该通过使用表单标签而不是 div 来使用语义 HTML，这样您就可以使用回车键来处理提交操作。其次，为两个不同的元素复制一个 id 不是一种合适的方法，因为 id 是该元素的唯一标识符。最后这是一个简单的表格，它可能会有所帮助。HTML:

<form id="my-form">
  <input type="text" id="my-input" />
  <button type="submit" id="submit-btn">send</button>
</form>

JS:

const formEl = document.getElementById("my-form") as HTMLFormElement;
const inputEl = formEl.querySelector("my-input") as HTMLInputElement;
const submitBtnEl = formEl.querySelector("submit-btn") as HTMLButtonElement;
formEl.addEventListener("submit", e => {
    e.preventDefault();
    // do what you want
});
inputEl.addEventListener("change", (e:Event|any) => {
    console.log(e.target.value)
    // do what you want
})