如何訪問嵌套在 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