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

【问题标题】：How to access form data nested inside divs (TypeScript)如何访问嵌套在 div 中的表单数据（TypeScript）
【发布时间】：2020-03-22 21:35:35
【问题描述】：

在下面的代码中，我想在每次用户在聊天表单的输入字段中输入一些文本数据后按下回车键时访问以表单编写的用户数据。您知道如何使用 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>

【问题讨论】：

标签： javascript typescript

【解决方案1】：

首先，您应该通过使用表单标签而不是 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
})

【讨论】：

感谢您的回答。现在我不幸在浏览器控制台中收到以下错误“TypeError: null is not an object (evalating 'formEl.querySelector')”
好的，你可以用这样的文档替换formEl inputEl = document.getElementById("my-input");和 submitBtn 一样
效果很好。我唯一需要改变的是脚本的位置。脚本必须在表单元素之后立即加载。否则看不到元素。非常感谢！

【解决方案2】：

回答前：你重复了id="chat-form"

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

例子

// select element
const elInput: HTMLInputElement = document.querySelector(`#chat-form-input`)

// add onkeypress listener
document.onkeypress = function (e: any) {

    // use e.keyCode
    if (e.key === 'Enter') {
      // code for enter
      console.log(elInput)
      console.log(elInput.value)
    }
}

<body>
  <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-container">
      <input id="chat-form-input" type="text" placeholder="Type a message!"/>
    </div>
  </div>
</body>

【讨论】：

运行你的代码后我得到一个错误属性'value' does not exist on type 'Element'.ts(2339)

【解决方案3】：

您应该尝试使用 JQuery 的组合。使用它，您应该像这样在输入元素上放置一个 id：

<input type="text" id="inputField" placeholder="search"/>

然后用 JQuery 查询输入字段。最佳实践建议也将其存储在局部变量中。

let inputFieldText = $("#inputField");

然后测试从 JQuery 返回的文本字段对象中的值。

if(inputFieldText.val()){
     console.log(inputFieldText.val())
}

作为参考，document.getElementById("inputField") 还有一种方法。只需将此功能链接到按下它时运行的按钮（例如“提交”按钮）。希望这会有所帮助！

【讨论】：