Mostrando a caixa de diálogo 'Selecionar arquivo' do navegador ao concentrar a entrada [TIPE = FILE] através da navegação do teclado
-
20-09-2019 - |
Pergunta
Como o título diz, eu quero que a caixa de diálogo 'Selecionar arquivo' seja aberta quando um certo input
Obtém o foco, tabulando os campos do formulário (usando a navegação no teclado). Por padrão, a janela 'Selecionar arquivo' abre apenas quando o campo é clicado.
Coloquei uma página no JS Bin para esta edição: http://jsbin.com/areba/edit
Atualmente, esta página consiste no seguinte código:
<!doctype html>
<html>
<head>
<title>Sandbox</title>
<meta charset="utf-8">
</head>
<body>
<form>
<input type="text">
<input type="file">
</form>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script>
$(function() {
$('input[type=text]').focus(function() {
$(this).next('input[type=file]').css('background', 'lime').trigger('click');
});
});
</script>
</body>
</html>
Como você pode ver, há uma entrada de texto e uma entrada de arquivo. A idéia é que, quando a entrada do texto recebe foco, a entrada do arquivo é 'clicada' ou o que quer que seja e a janela 'Selecionar arquivo' seja aberta.
o .css('background', 'lime')
A declaração parece funcionar bem; No entanto, invocando .trigger('click')
Na entrada do arquivo, parece não fazer nada.
(Percebo que isso pode causar um problema de acessibilidade, então, por favor, não vamos discutir isso. Obrigado.)
Solução
Isso funcionará no IE e no Safari (eu acho), mas não na ópera ou no Firefox, pois eles não implementaram o evento click () para elementos de upload de arquivos - editar: ainda.
Outras dicas
Duvido que você possa ativar a caixa de diálogo por motivos de segurança. Um evento de clique real tem que acontecer, dependendo do navegador.
Eu sei que Flash/Flex tem esse requisito.