如何访问嵌套在 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，以便您可以使用 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
})

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

Answer 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") 。 只需将此功能链接到按下它时运行的按钮（例如“提交”按钮）。 希望这可以帮助！

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

问题描述

3 个解决方案

解决方案1
2 已采纳 2020-03-23 00:45:54

解决方案2
1 2020-03-22 21:43:26

解决方案3
0 2020-03-23 00:12:59

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

问题描述

3 个解决方案

解决方案1 2 已采纳 2020-03-23 00:45:54

解决方案2 1 2020-03-22 21:43:26

解决方案3 0 2020-03-23 00:12:59

解决方案1
2 已采纳 2020-03-23 00:45:54

解决方案2
1 2020-03-22 21:43:26

解决方案3
0 2020-03-23 00:12:59