在文本框上调用dispatchEvent(clickEvent)不起作用

Question

我想在用户单击按钮时以编程方式在文本框上生成单击事件。我可以看到文本框获取了事件，但焦点没有更改为文本框。 我做错了什么？

function handleClick(event)
{
    let textbox = document.getElementById('text');
    let rect = textbox.getBoundingClientRect();            

    let newEvent = new MouseEvent('click', {
        clientX: rect.x + 5,
        clientY: rect.y + 5,
        x: rect.x + 5,
        y: rect.y + 5,
        pageX: rect.x + 5,
        pageY: rect.y + 5
    });

    textbox.dispatchEvent(newEvent);
}

<input type="text" id="text" onclick="console.log('clicked')" /> 

<button onclick="handleClick(event)">Click</button>

Answer 1

在您想要关注的元素上致电

focus()

MDN。

document.querySelector('#button').addEventListener('click', () => {
  document.querySelector('#inp').focus()
})

<input type="text" id="inp" onclick="console.log('clicked')" /> 
<button id="button">Click</button>