Question

我有一个文件输入框，允许用户从其本地文件系统中选择一个文件。然后将该文件读入textarea。我知道只有在输入字段不再聚焦时才会发生变化事件。但是，我的应用程序的行为是不一致的。有时输入在用户选择文件后正确失去焦点，有时则不会。在用户选择文件后，我不知道如何强制输入失去焦点。我的代码：

HTML：

<div class="form-group pull-left">
   <input type="file" id="scriptFile" class="form-control input-sm inputfile">
   <label for="scriptFile"><div class="glyphicon glyphicon-open"></div><span> Choose a Script&hellip;</span></label>
</div>

Main.js：

$("#scriptFile").change(function(event) {
    var file = event.target.files[0];
    // Just updates the "select a file" button to display the selected file's name.
    $("#scriptFile").next('label').find('span').html(" " + event.target.value.split( '\\' ).pop());
    var reader = new FileReader();
    reader.onload = function(event) {
        editor.setValue(event.target.result);
        editor.clearSelection();
    };
    reader.readAsText(file);
    $('#scriptFile').addClass("selected"); //CSS purposes
    editor.focus();
});

如何确保用户从本地系统中选择一个文件后，从输入中删除焦点以正确触发更改事件？

更新：问题与选择相同的文件有关，而不是焦点。文件输入仍然具有旧文件值...并且由于它不是更改，因此不会触发更改事件。所以，现在我需要找出如何使用jQuery清除文件输入值。

更新：解决了！需要将此添加到更改事件以清除值：

$('#scriptFile').closest('form').get(0).reset();

Answer 1

未触发on change事件，因为如果未清除文件输入值并且用户再次选择同一文件，则不会发生任何更改。读入文件后，使用以下命令清除文件输入值：

$('#scriptFile').closest('form').get(0).reset();

这将确保如果用户再次选择相同的文件，则会在值已重置时触发on change事件。

输入文件选择不会一致地触发更改事件

1 个答案: