时间戳

首页 > 解决方案 > 如何访问嵌套在 div 中的表单数据（TypeScript）

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

问题描述

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

<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>

标签： javascripttypescript

解决方案

首先，您应该通过使用表单标签而不是 div 来使用语义 HTML，这样您就可以使用 enter 键来处理提交操作。其次，复制两个不同元素的 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
})

推荐阅读