演示

Question

我一直在网上寻找有关如何将特定的键盘键连接到div元素的答案，到目前为止，我只能看到的是如何执行通用键（onkeydown）。可以通过使用keyCodes来检测特定键来按下特定键，以便它可以通过id调用DIV元素并将其激活

class Test
end

t = Test.new
  #=> #<Test:0x0000000001eb9c58>
t.instance_variable_set("@b", data.first[:o][0,2].flat_map(&:values))
  #=> ["ede", "qpl"]
t
  #=> #<Test:0x0000000001eb9c58 @b=["ede", "qpl"]>
t.instance_variable_set("@id", 'teq')
  #=> "teq"
t.instance_variables
  #=> [:@b, :@id]
t
  #=> #<Test:0x0000000001eb9c58 @b=["ede", "qpl"], @id="teq">

test = Test.new
  #=> #<Test:0x0000000001e9ad58>
test.instance_variable_set("@k", data.first[:k].flat_map(&:values))
  #=> ["abc", "bcd", "cde"]
test
  #=> #<Test:0x0000000001e9ad58 @k=["abc", "bcd", "cde"]>
test.instance_variable_set("@o", t) 
  #=> #<Test:0x0000000001eb9c58 @b=["ede", "qpl"], @id="teq">
test.instance_variables
  #=> [:@k, :@o]
test
  #=> #<Test:0x0000000001e9ad58 @k=["abc", "bcd", "cde"],
  #     @o=#<Test:0x0000000001eb9c58 @b=["ede", "qpl"], @id="teq">>

Answer 1

第一件事，您的代码中存在语法错误。

var inpt = document.getElementById("11w");
inpt.addEventListener("keyup", function(e){

e.preventDefault();
if (e.keyCode==49)
document.getELementById("11w").click();
}//<--------- syntax error
});

据我所知，这可能是解决方案之一：

 <textarea id="11w" placeholder="Press 1 or write 1"></textarea>
  <br/>
  <button id="btn">My value will change</button>
  
  <script>
    var inpt = document.getElementById("11w");
    inpt.addEventListener("keyup", function(e){
      e.preventDefault();
      console.log(e.keyCode);
      if (e.keyCode==49){
        document.getElementById("btn").click();
      }
    });

    document.getElementById("btn").addEventListener("click", function(e){
      document.getElementById("btn").innerHTML = "I am clicked";
      console.log("btn clicked");
    });
  </script>

Answer 2

您可以侦听文档的按键事件，然后对每个按键进行自己喜欢的事情。

演示

// Assingin to the keyup event of the document
document.onkeyup = (e) => {
  // Getting the div element by it's id #test
  const div = document.querySelector('#test');
  // e.which returns the ascii code of the key that has been pressed
  switch (e.which) {
    case 83:
      // 83 is lower case 's' (show) so we set the div to be block
      div.style.display = 'block';
      break;
    case 72:
      // 72 is lower case h (hide) so we set the div to be none
      div.style.display = 'none';
      break;
  }

};

div {
  width: 150px;
  height: 150px;
  background: blue;
}

<div id="test"></div>

这只是一个示例，向您展示如何将键绑定到某个元素，它决不是绑定到它，它仅取决于逻辑，我们可以添加更多逻辑来通过按键来控制两个或更多元素一键。关键是您为每个键编写的代码即使在您输入内容时也会触发您的位置，这是可以避免的，但是我会留给您：）

如何将特定的键盘键连接到DIV元素？

2 个答案:

演示