Empresas
Empleos
  • Sobre nosotros
  • Soluciones
    • Publicación de vacantes
      Publica tu vacante y recibe candidatos calificados en 48h.
    • Evaluación de candidatos
      500+ pruebas técnicas y psicológicas, más anti-fraude.
    • Headhunting
      Búsqueda ejecutiva a la medida de principio a fin.
    • Nómina + EOR
      Dispersión de nómina y EOR en más de 15 países de LATAM.
  • Precios
  • Empleos

0

403
Vistas
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 la pregunta
Encuentra empleos remotos

¡Descubre la nueva forma de encontrar empleo!

Top de empleos
Top categorías de empleo
Empresas
Publicar vacante Precios Comercial
Legal
Términos y condiciones Política de privacidad
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Recomiéndame algunas ofertas
Necesito ayuda