Javascript - 返回控制台/DOM output 作為單個 JSON Z78E6221F6393D1356681DBCE6DZ

Question

在我的頁面中，我添加了一個onkeyup事件，以獲取在我的input中按下的鍵。

我在控制台中得到結果，但我需要將 output 所有事件作為單個JSON output 並return 。

我是JS新手，感謝您的幫助

PS：由於某種原因，我的片段在這里不起作用，但在我的index.html中，我可以看到事件 output 很好。

 window.onload = function() { const myInput = document.getElementById('myInput'); myInput.onkeyup = function(e) { console.log(e); } }

 <input type="text" value="" id="myInput">

下面的截圖是我得到的回報：

當前 output ：

{isTrusted: true, key: "a", code: "KeyA", location: 0, ctrlKey: false, …}
{isTrusted: true, key: "s", code: "KeyS", location: 0, ctrlKey: false, …}
{isTrusted: true, key: "d", code: "KeyD", location: 0, ctrlKey: false, …}
{isTrusted: true, key: "a", code: "KeyA", location: 0, ctrlKey: false, …}
{isTrusted: true, key: "s", code: "KeyS", location: 0, ctrlKey: false, …}
{isTrusted: true, key: "d", code: "KeyD", location: 0, ctrlKey: false, …}
{isTrusted: true, key: "a", code: "KeyA", location: 0, ctrlKey: false, …}
{isTrusted: true, key: "s", code: "KeyS", location: 0, ctrlKey: false, …}
{isTrusted: true, key: "d", code: "KeyD", location: 0, ctrlKey: false, …}

我正在尋找的是能夠將其分配給一個變量，例如var json和 output 將是：

{
    "onkeyup":
        "{isTrusted: true, key: "a", code: "KeyA", location: 0, ctrlKey: false, …}
        {isTrusted: true, key: "s", code: "KeyS", location: 0, ctrlKey: false, …}
        {isTrusted: true, key: "d", code: "KeyD", location: 0, ctrlKey: false, …}
        {isTrusted: true, key: "a", code: "KeyA", location: 0, ctrlKey: false, …}
        {isTrusted: true, key: "s", code: "KeyS", location: 0, ctrlKey: false, …}
        {isTrusted: true, key: "d", code: "KeyD", location: 0, ctrlKey: false, …}
        {isTrusted: true, key: "a", code: "KeyA", location: 0, ctrlKey: false, …}
        {isTrusted: true, key: "s", code: "KeyS", location: 0, ctrlKey: false, …}
        {isTrusted: true, key: "d", code: "KeyD", location: 0, ctrlKey: false, …}"
}

提前致謝！

Answer 1

好的，首先要做的事情：

The output sample you gave us is not valid in any JSON specification and don't evaluate as a object in JavaScript (because of the wrong use of quotes).

相反，您想要的是一個 object ，其屬性“onkeyup”（處理的事件的名稱）包含一個對象數組（在您的情況下，該事件的發生）。

let obj = { onkeyup: [] };

window.onload = function() {
    const myInput = document.getElementById('myInput');

    myInput.onkeyup = function(e) {
        obj.onkeyup.push(e);
        console.log( obj );
    }

}

樣品 output

這可能會通過讓 object 具有所需的結構來解決您的問題，您可以根據需要在代碼中進一步更新和使用。

Answer 2

也許是這樣的？

  
  
 
   
 
    
    // new Array to store events
    let events = []
    window.onload = function() {
        const myInput = document.getElementById('myInput');
        myInput.onkeyup = function(e) {
            //console.log(e);
            //Push events into array
            events.push(e)
            // Log events array
            console.log({events})
        }
    }
 
    
<input type="text" value="" id="myInput">