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

Question

我有一个文件输入框，允许用户从他们的本地文件系统中选择一个文件。然后将该文件读入文本区域。我知道 on-change 事件只会在输入字段不再处于焦点时发生。但是，我的应用程序的行为不一致。有时，在用户选择文件后，输入会正确地失去焦点，有时则不会。我不知道如何在用户选择文件后强制输入失去焦点。我的代码:

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>

主要.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();

这将确保如果用户再次选择同一个文件，更改事件将触发，因为值现在已被重置。