voidproc/input-event.html

## input-event.html
<!DOCTYPE html>
<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>input cancel event</title>
</head>
<body>
  <div>
    <input type="file" id="f" name="f">
  </div>
  <div>
    <div id="log-list"></div>
  </div>

  <script>
    function writeLog(text) {
      const divLog = document.createElement('div');
      divLog.innerHTML = text;

      const divLogList = document.getElementById('log-list');
      divLogList.appendChild(divLog);

      console.log(text);
    }

    const input = document.getElementById("f");

    input.oncancel = function(e) {
      writeLog('oncancel');
    };

    input.oninput = function(e) {
      writeLog(e.target.files[0].name);

      e.target.value = '';
    };

  </script>
</body>
</html>
	<!DOCTYPE html>
	<head>
	<meta charset="utf-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<title>input cancel event</title>
	</head>
	<body>
	<div>
	<input type="file" id="f" name="f">
	</div>
	<div>
	<div id="log-list"></div>
	</div>

	<script>
	function writeLog(text) {
	const divLog = document.createElement('div');
	divLog.innerHTML = text;

	const divLogList = document.getElementById('log-list');
	divLogList.appendChild(divLog);

	console.log(text);
	}

	const input = document.getElementById("f");

	input.oncancel = function(e) {
	writeLog('oncancel');
	};

	input.oninput = function(e) {
	writeLog(e.target.files[0].name);

	e.target.value = '';
	};

	</script>
	</body>
	</html>