Question

根据this answer考虑以下示例代码。

<head>
<meta charset="UTF-8">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
</head>
<body>
<script>
$(this).ready( function() {
    $("#foobar").keydown(function(e) {
      if (e.keyCode != KeyEvent.DOM_VK_UP) {
        console.log("Foo Bar");
        var f = jQuery.Event("keydown");
        f.which = KeyEvent.DOM_VK_UP;
        f.keyCode = KeyEvent.DOM_VK_UP; 
        $("#foobar").trigger(f);
        e.preventDefault();
        e.stopImmediatePropagation();
      }
      else {
        console.log("Hello World");
      }
    });
})
</script>
<div id="foobar" contenteditable="true"> 
  Foo Bar
  <br>
  Bar Bar
</div>
</body>

此示例的输出是在按下某个键的时候将以下内容打印到控制台。但是，仅当按下真实Up时，光标才会向上移动。

Foo Bar
Hello World

这意味着触发器工作，但光标不会向上移动。

如何使光标的行为与按下任何键时用户按下键盘上的Up键完全相同，而不仅仅是真正的Up？

我还尝试了以下触发方式，尽管打印true是成功的，但也没有成功。

 var evt = document.createEvent("KeyboardEvent");                     
 evt.initKeyEvent ("keypress", true, true, window,                    
 0, 0, 0, 0, KeyEvent.DOM_VK_UP, KeyEvent.DOM_VK_UP);                 
 var success = document.getElementById("foobar").dispatchEvent(evt)   
 console.log(success)

Answer 1

当按下任何键时，如何让键出现在div中，不只是一个真正的？

尝试使用KeyboardEvent

替换KeyEvent代替.html(function(index, html))

<head>
<meta charset="UTF-8">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
</head>
<body>
<script>
$(this).ready( function() {
    $("#foobar").keydown(function(e) {
      if (e.keyCode != KeyboardEvent.DOM_VK_A) {
        console.log("Foo Bar");
        var f = jQuery.Event("keydown");
        f.which = KeyboardEvent.DOM_VK_A;
        f.keyCode = KeyboardEvent.DOM_VK_A; 
        $("#foobar").html(function(_, html) {
          return html + "a"
        }).trigger(f);
        e.preventDefault();
        e.stopImmediatePropagation();
      }
      else {
        console.log("Hello World");
      }
    });
})
</script>
<div id="foobar" contenteditable="true"> 
  Foo Bar
  <br>
  Bar Bar
</div>
</body>

如何触发实际由浏览器处理的KeyboardEvent（DOM_VK_UP），就像用户键入密钥一样？

1 个答案: