当文件输入具有焦点时按回车键的正确行为是什么

Question

我有一个简单的形式。它包含一个类型的"文件"输入和一个提交按钮。它正在进行508合规性测试，他们有一个问题。

如果按 FILE 输入并按回车键，IE 将提交表单。我的理解是，这是正确的行为。我没有做任何Javascript或任何故意改变按键行为的事情。

我们的 508 测试人员不同意，并认为在 FILE 输入中按 Enter 应该打开浏览对话框。我还没有找到任何结论，但我希望有人能为我澄清。表格示例如下。

<form id="upload_Form" METHOD="POST" ENCTYPE="multipart/form-data" action="" NAME="uploadForm">
<INPUT TYPE="FILE" NAME="filenames" id="filenames" title="Select File for Upload">
<input type="submit" value="Upload"/>
</form>

Answer 1

实际上，这是共识的问题。我个人认为，就可访问性而言，使用 Enter 键而不是空格来触发浏览对话框是一种正确的行为——比如说，对于普通用户来说更直观。这就是为什么 WebKit 这样做的原因，而不是在集中上传输入时提交表单。

一个简单的jQuery解决方法作为IE的修复：

$(document).keypress(
    function(event){
     if (event.which == '13') {
        event.preventDefault();
         $('#upload-form').click();
      }
});

演示小提琴

Answer 2

在 <input type="file"/> 元素中，在现代浏览器中，焦点转到调用文件选择对话框的按钮。在该实例中按回车键应调用对话框，而不是提交表单。当然，IE以自己的方式做事。我倾向于使IE符合标准，而不是相反。

但更重要的是，如果该字段没有填写，您为什么要故意提交表格？这充其量只是一个验证错误。