HTML DOM Input FileUpload autofocus Property


The HTML DOM Input FileUpload autofocus property sets/returns whether Input FileUpload is focused upon initial page load.

Syntax

Following is the syntax −

  • Returning boolean value - true/false
inputFileUploadObject.autofocus
  • Setting autofocus to booleanValue
inputFileUploadObject.autofocus = booleanValue

Boolean Values

Here, “booleanValue” can be the following −

booleanValueDetails
trueIt defines that input will be autofocused on page load.
falseIt is the default value and input is not autofocused.

Example

Let us see an example of Input FileUpload autofocus property −

 Live Demo

<!DOCTYPE html>
<html>
<head>
<title>Input FileUpload autofocus</title>
<style>
   form {
      width:70%;
      margin: 0 auto;
      text-align: center;
   }
   * {
      padding: 2px;
      margin:5px;
   }
   input[type="button"]{
      border-radius: 10px;
   }
</style>
</head>
<body>
<form>
<fieldset>
<legend>FileUpload-autofocus</legend>
<label for="FileSelect">Upload:
<input type="file" id="FileSelect" autofocus>
</label><br>
<input type="button" onclick="removeAutofocus()" value="Remove Autofocus">
<div id="divDisplay"></div>
</fieldset>
</form>
<script>
   var divDisplay = document.getElementById("divDisplay");
   var inputFile = document.getElementById("FileSelect");
   divDisplay.textContent = 'Auto Focus:'inputFile.autofocus;
   function removeAutofocus() {
      inputFile.autofocus = false;
      divDisplay.textContent = 'Auto Focus:'inputFile.autofocus;
   }
</script>
</body>
</html>

Output

This will produce the following output −

Before clicking ’Remove Autofocus’ button −

After clicking ‘Remove Autofocus’ button −

Updated on: 30-Jul-2019

48 Views

Kickstart Your Career

Get certified by completing the course

Get Started
Advertisements