Skip to content
Related Articles

Related Articles

HTML | DOM Input FileUpload autofocus Property

View Discussion
Improve Article
Save Article
Like Article
  • Difficulty Level : Basic
  • Last Updated : 06 Jun, 2022

The Input FileUpload autofocus property in HTML DOM is used to set or return whether a file upload button should automatically get focus when the page loads, or not. Syntax:

  • Return the autofocus property:
fileuploadObject.autofocus
  • Set the autofocus property:
fileuploadObject.autofocus=true|false

Property Values:

  • true: The file upload button get focused
  • false: It is a default value. The file upload button does not get focused

Return Value: 

  • It returns the boolean value which represents that upload button is focused or not.

Example-1: Return autofocus property. 

html




<!DOCTYPE html>
<html>
 
<head>
    <style>
        h1 {
            color: green;
        }
    </style>
</head>
 
<body>
    <center>
        <h1>Geeks for Geeks</h1>
        <input type="file"
               id="myFile"
               autofocus>
 
        <p id="demo">
      </p>
 
        <button onclick="myFunction()">
          Click
      </button>
 
        <script>
            function myFunction() {
                var x =
                    document.getElementById(
                      "myFile").autofocus;
               
                document.getElementById(
                  "demo").innerHTML = x;
            }
        </script>
    </center>
</body>
 
</html>

Output: Before Click: After Click: Example-2: Set autofocus property. 

html




<!DOCTYPE html>
<html>
 
<head>
    <style>
        h1 {
            color: green;
        }
    </style>
</head>
 
<body>
    <center>
        <h1>
          Geeks for Geeks
      </h1>
        <input type="file"
               id="myFile">
 
        <p id="demo">
      </p>
 
        <button onclick="myFunction()">
          Click
      </button>
 
        <script>
            function myFunction() {
                var x =
                    document.getElementById(
                      "myFile").autofocus =
                    "true";
               
                document.getElementById(
                  "demo").innerHTML = x;
            }
        </script>
  </center>
 
</body>
 
</html>

Output: Before Click: After Click: Supported Browsers:

  • Google Chrome
  • Mozilla Firefox
  • Edge
  • Opera
  • Safari


My Personal Notes arrow_drop_up
Recommended Articles
Page :

Start Your Coding Journey Now!