时间戳

首页 > 解决方案 > 单击后如何使用事件侦听器获取文本值

javascript - 单击后如何使用事件侦听器获取文本值

问题描述

我正在使用 JavaScript 进行录制和播放。这是输出： - 在此处输入图像描述

现在：如果您看到，在按下每个键后，它会显示我按下了哪个键。我想要一个完整的字符串，无论我将提供什么输入。我不想要字符。以及我如何执行 shift、ctrl、空格、退格键事件。

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>

标签： javascripthtmldom-eventsaddeventlistener

解决方案

使用event.target.value而不是event.key. 并查看更多键盘事件

或者，如果你console.log(event). 他们将展示所有的可能性

在此处输入图像描述

更新

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>

推荐阅读