如何访问嵌套在 div 中的表单数据（TypeScript）
[英]How to access form data nested inside divs (TypeScript)
问题描述
In a following code I want to access user data written in a form each time user presses an enter key after typing some text data inside an input field in chat-form.
在下面的代码中，我想在每次用户在聊天表单的输入字段中输入一些文本数据后按下回车键时访问写入表单的用户数据。 Do you have any idea how can I access the following text-data using TypeScript?您知道如何使用 TypeScript 访问以下文本数据吗？ I have already tried with jQuery but none of the tested code seems to work.我已经尝试过使用 jQuery，但经过测试的代码似乎都不起作用。 I am new to web-dev but very eager to learn new things.我是网络开发新手，但非常渴望学习新事物。
<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>
3 个解决方案
解决方案1
2 已采纳 2020-03-23 00:45:54
first, you should use a semantic HTML by using form tag instead of div so u can use enter key to handle the submit action.首先，您应该通过使用表单标签而不是 div 来使用语义 HTML，以便您可以使用 enter 键来处理提交操作。 second, it is not an appropriate way to duplicate an id for two different elements because id is a unique identifier for the element.其次，为两个不同的元素复制 id 不是一种合适的方式，因为 id 是元素的唯一标识符。 finally here is a simple form and it might be helpful.最后这是一个简单的表格，它可能会有所帮助。 HTML: HTML：
<form id="my-form">
<input type="text" id="my-input" />
<button type="submit" id="submit-btn">send</button>
</form>
JS: 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
})
解决方案2
1 2020-03-22 21:43:26
Before the answer: you have duplicated id="chat-form"在回答之前：你已经复制了id="chat-form"
<div id="chat-form">
<input id="chat-form"type="text" placeholder="Type a message!"/>
</div>
Example例子
// 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>
解决方案3
0 2020-03-23 00:12:59
You should try using a combination of JQuery.您应该尝试使用 JQuery 的组合。 Using this, you should put an id on the input element like so:使用它，您应该在输入元素上放置一个 id，如下所示：
<input type="text" id="inputField" placeholder="search"/>
Then query the input field with JQuery.然后用JQuery查询输入字段。 Best practice would suggest to store it in a local variable as well.最佳实践建议将它也存储在局部变量中。
let inputFieldText = $("#inputField");
Then test for the value in the text field object as returned from JQuery.然后测试从 JQuery 返回的文本字段对象中的值。
if(inputFieldText.val()){
console.log(inputFieldText.val())
}
For reference, there is also a way to do so with document.getElementById("inputField") .作为参考，还有一种方法可以使用document.getElementById("inputField") 。 Just link this function to a button that runs on pressing it (such as a "submit" button).只需将此功能链接到按下它时运行的按钮（例如“提交”按钮）。 Hope this helps!希望这可以帮助！
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.