Empresas
Empregos
  • Sobre nós
  • Soluções
    • Publicação de vagas
      Publique sua vaga e receba candidatos qualificados em 48h.
    • Avaliações de candidatos
      Mais de 500 testes técnicos e psicológicos, mais anti-fraude.
    • Headhunting
      Busca executiva personalizada do início ao fim.
    • Folha de Pagamento + EOR
      Dispersão de folha e EOR em mais de 15 países da LATAM.
  • Preços
  • Empregos

0

415
Visualizações
Open file in browser with FileReader API, triggered by CTRL+O, without user click

I'm doing an app in the browser, and I want to use CTRL+O to open a file and read its content with the FileReader API.

The following code works, but only after a user interaction with mouse:

window.onkeydown = (e) => {
    if (e.ctrlKey && event.key === 'o') {
        e.preventDefault();                               // CTRL + O :
        document.getElementById('file-input').click();    // trigger a click on the INVISIBLE file-picker input            
        return false;
    }
}
document.getElementById('file-input').addEventListener('change', (e) => { 
    var file = e.target.files[0]; 
    if (!file) { return; } 
    var reader = new FileReader(); 
    reader.onload = function(e) { 
        console.log(e.target.result);
    }; 
    reader.readAsText(file); 
}, false);
#file-input { display: none; }
<input type="file" id="file-input" />

However, I'd like to allow the user to do CTRL + O right after the loading of the page, and allow the file to be loaded, even if there is no mouse user interaction.

I get this issue on Firefox:

<input> picker was blocked due to lack of user activation.

On Chrome, it works without problem.

Question: How to allow the user arriving on the webpage to do CTRL + O straightforwardly, without first having to click on buttons to initiate a "user interaction"?

Couldn't a keypress (CTRL+O) be considered as a user interaction?

Note: I'm doing an app for people who mainly use keyboard shortcuts and few mouse clicks.

about 4 years ago · Juan Pablo Isaza
Responde à pergunta
Encontrar trabalhos remotos

Descubra a nova forma de encontrar um emprego!

melhores empregos
Principais categorias de trabalho
Empresas
Postar vaga Preços Comercial
Jurídico
Termos e Condições Política de privacidade
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Recomende algumas ofertas para mim
Preciso de ajuda