有可能知道文件输入对话框何时关闭？

Z时代
2024-01-10
分类：问答

我有一个输入文件选择器，我想知道何时模式正在关闭，如果没有选择一个文件。我只知道当选择一个文件，该文件只适用或改变有可能知道文件输入对话框何时关闭？

<input type="file" id="selector"> 
$("#selector").on("change", function() { 
    //Changed 
});

回答：

当打开的对话框中试试这个

<input type='file' id='testfile' style='display:none' /> 
    <button onclick='document.getElementById("testfile").click()'>Upload</button> 
<script> 
var testfile = document.getElementById('testfile') 
testfile.onclick = focus(); 
function focus() 
{ 
    document.body.onfocus = invoke(); 
} 
function invoke() 
{ 
    if(testfile.value.length) 
    { 
    alert('has file'); 
    } 
    else {alert('empty')} 
</script>

回答：

的变化，它变得专注，所以浏览器窗口失去焦点。关闭对话框后，焦点将恢复。您必须在window上订阅focus事件，但由于许多原因，窗口可能会丢失并获得焦点，所以如果对话框已打开，则必须保留一个标记。

下面的代码工作在：

的Chrome 63.0.3239.84 64位的Windows 7

的Internet Explorer 11.0.9600.18860在Windows 7

歌剧12.18 1872年的32倍在Windows 7

并且不起作用：

火狐58.0b11（64位）在Windows 7

function now() {  
    return window.performance ? performance.now() : +new Date  
}  
var isFileDialogOpened = false;  
var input = document.querySelector('input');  
input.addEventListener('click', function (e) {  
    console.log('clicked', now())  
    isFileDialogOpened = true  
})  
input.addEventListener('blur', function (e) {  
    console.log('input blur', now())  
    isFileDialogOpened = true  
})  
window.addEventListener('focus', function (e) {  
    if (isFileDialogOpened) {  
    console.log('closed (window got focus)', now())  
    isFileDialogOpened = false  
    }  })