How to take text value after click using event listener

Question

I am working on record and playback using JavaScript. Here is output:-

Now: If you see, after pressing every key it showing which key I pressed. I wanted in one complete string whatever I will give input. I don't want in characters. And how i can perform shift, ctrl, space, backspace key event.

document.addEventListener('click', function(event) {
  console.log("Id is: ", event.target.id, " |  Name is: ", event.target.name);
});
document.addEventListener('keypress', function(event) {
  console.log("key is", event.key);
});

<form id="form1" action="post">
  Enter First Name:-<input type="text" name="Fname" id="FN" /><br><br> Enter Last Name:-<input type="text" name="Lname" id="LN" /><br><br>

  <input type="checkbox" id="vehicle1" name="vehicle1" value="Bike">
  <label for="vehicle1"> I have a bike</label><br>
  <input type="checkbox" id="vehicle2" name="vehicle2" value="Car">
  <label for="vehicle2"> I have a car</label><br>
  <input type="checkbox" id="vehicle3" name="vehicle3" value="Boat">
  <label for="vehicle3"> I have a boat</label><br><br>
  <input type="submit" value="Submit">
  <input type="button" name="btn1" id="b1" value="Reset" />

</form>

Answer 1

Use event.target.value instead of event.key. And check out more keyboard events

Or if you console.log(event). They will show the all possibilities

updated

document.addEventListener('click', function(event) {
 // console.log("Id is: ", event.target.id, " |  Name is: ", event.target.name);

});

document.addEventListener('keyup', function(event) {
  console.log("key is", event.target.value);
  
  const key = event.keyCode || event.which;
  
  if(key === 8){
     //backspace
  }
  if(event.shiftKey){
      // shift key
  }
  
  if(event.ctrlKey){
     // control key
  }

});

<form id="form1" action="post">
  Enter First Name:-<input type="text" name="Fname" id="FN" /><br><br> Enter Last Name:-<input type="text" name="Lname" id="LN" /><br><br>

  <input type="checkbox" id="vehicle1" name="vehicle1" value="Bike">
  <label for="vehicle1"> I have a bike</label><br>
  <input type="checkbox" id="vehicle2" name="vehicle2" value="Car">
  <label for="vehicle2"> I have a car</label><br>
  <input type="checkbox" id="vehicle3" name="vehicle3" value="Boat">
  <label for="vehicle3"> I have a boat</label><br><br>
  <input type="submit" value="Submit">
  <input type="button" name="btn1" id="b1" value="Reset" />

</form>