显示浏览器的“选择文件”；通过键盘导航聚焦输入[类型=文件]时的对话框
正如标题所示，我希望当某个输入通过在表单字段中切换（使用键盘导航）获得焦点时打开“选择文件”对话框。默认情况下，仅当单击该字段时才会打开“选择文件”窗口。
我在 JS Bin 上针对这个问题建立了一个页面： http://jsbin.com/areba/edit
目前，该页面由以下代码组成：
<!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>
如您所见，有一个文本输入和一个文件输入。这个想法是，当文本输入接收焦点时，文件输入被“单击”或其他任何操作，并且“选择文件”窗口打开。
.css('background', 'lime') 语句似乎工作正常；但是，在文件输入上调用 .trigger('click') 似乎根本不起作用。
（我意识到这可能会导致可访问性问题，所以请不要讨论这个问题。谢谢。）
As the title says, I want the ‘select file’ dialog to open when a certain input gets focus by tabbing through the form fields (using keyboard navigation). By default, the ‘select file’ window only opens when the field is clicked.
I put up a page on JS Bin for this issue: http://jsbin.com/areba/edit
Currently, this page consists of the following code:
<!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>
As you can see, there is a text input and a file input. The idea is that when the text input receives focus, the file input gets ‘clicked’ or whatever and the ‘select file’ window opens.
The .css('background', 'lime') statement seems to work fine; however, invoking .trigger('click') on the file input seems to do nothing at all.
(I realize this might cause an accessibility problem, so please, let’s not discuss that. Thanks.)
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（2）
这将在 IE 和 Safari 中工作（我认为），但在 Opera 或 Firefox 中不起作用，因为它们还没有实现文件上传元素的 click() 事件 - 编辑：还没有。
This will work in IE and Safari (I think), but not in Opera or Firefox, as they haven't implemented the click() event for file upload elements - edit: yet.
出于安全原因，我怀疑您是否能够激活该对话框。真正的点击事件必须发生，具体取决于浏览器。
我知道Flash/Flex有这个要求。
I doubt you would be able to do activate the dialog for security reasons. A real click event has to happen, depending on the browser.
I know Flash/Flex have this requirement.