焦點（）不隨輸入

Question

我建立在角組件在那裏我有一個HTML畫布，當我點擊它，我需要把輸入的元素在畫布上，使用戶可以寫一些文字，然後按回車工作，然後文本將被複制到畫布。

因此，目前所有的工作都是有效的，但我希望當用戶點擊畫布時，同時將輸入放置在畫布上，焦點設置在畫布上，因此用戶可以立即寫入不得不再次點擊輸入。

我的問題降到最低，所以我現在有一個簡單的帆布和輸入元素，當我點擊我想將焦點設置在輸入在畫布上，但它不工作。有人可以幫我嗎？

我有一個fiddle，這就是JS

const canvas = document.querySelector('#my-canvas'); 

canvas.addEventListener('mousedown', (e) => { 
    const input = document.querySelector('.canvas__input'); 
    console.log(input); 
    input.focus(); 
}); 

Answer 1

根據MDN DOC：

如果從mouseDown事件處理函數調用HTMLElement.focus（），您 必須調用event.preventDefault（），以保持重心離開 HTML元素。

所以，請試試這個：

const canvas = document.querySelector('#my-canvas'); 

canvas.addEventListener('mousedown', (e) => { 
    e.preventDefault(); 
    const input = document.querySelector('.canvas__input'); 
    console.log(input); 
    input.focus(); 
});