Question

我有一个输入文件选择器，我想知道如果没有选择文件，模式何时关闭。我只知道只有在选择或更改文件时才能使用的更改

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

Answer 1

试试这个

Div

Answer 2

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

以下代码适用于：

Windows 7上的Chrome 63.0.3239.84 x64
Windows 7上的Internet Explorer 11.0.9600.18860
Windows 12上的Opera 12.18 1872 x32

并且不适用于：

Windows 7上的Firefox 58.0b11（64位）

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
  }
})

<input type=file>

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

2 个答案: