调度KeyboardEvent无法在textarea中生成字符

Question

var el = document.getElementById('action');

el.addEventListener('click', function()
{
    var t = document.getElementById('text');
    t.value = 'A should be typed later';
    t.focus();
    t.setSelectionRange(0, 0);

    setTimeout(function()
    {
        t.dispatchEvent(new Event('keypress', {keyCode: 65}))
    }, 800);

}, false);

<textarea id="text"></textarea>
<button id="action">
    Do It
</button>

我想念的a是什么,没有添加到开头textarea？

目的是真正模拟键盘上按键的实际按键,而不是(重新)设置文本区域value.

更新:这不是这个问题的重复.

(i)大部分答案都有用jQuery.

(ii)我无法从上述案例的答案中找到一个有效的例子.

(iii)实际上,上述代码来自该页面.

无论如何,这是否重复.您可以将问题读作:为什么以上简单的代码不起作用？

Answer 1

必须同意 Heretic Monkey 的观点 - 该事件将正确“触发”，但实际上不会执行该操作（安全 - 否则 javascript 可以相对容易地在表单中输入各种垃圾！！！）。

不过，您仍然可以做的是创建事件并模拟结果 - 当然这有点笨拙，但这可能会有所帮助 - 这样您仍然可以玩冒泡和其他有趣的事件相关方面，同时仍然获得您想要的结果为了。我承认这很尴尬！

var el = document.getElementById('action');

el.addEventListener('click', function()
{
    var t = document.getElementById('text');
    t.value = 'A should be typed later';
    t.focus();
    t.setSelectionRange(0, 0);

    setTimeout(function()
    {
      var event = document.createEvent('Event');
      event.key = 65;
      event.initEvent('keypress');
      document.dispatchEvent(event);
    }, 800);

}, false);

document.addEventListener('keypress', function(e){
  let t = document.getElementById('text');
  let oldText = t.value;

    t.value = String.fromCharCode(e.key) + oldText;
    t.focus();
    t.setSelectionRange(1, 0);

});

<textarea id="text"></textarea>
<button id="action">
    Do It
</button>