HTML DOM Input Email autofocus Property

HTMLWeb DevelopmentFront End Technology

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

Syntax

Following is the syntax −

  • Returning boolean value - true/false
inputEmailObject.autofocus
  • Setting autofocus to booleanValue
inputEmailObject.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 Email autofocus property −

 Live Demo

<!DOCTYPE html>
<html>
<head>
<title>Input Email 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>Email-autofocus</legend>
<label for="EmailSelect">User Email :
<input type="email" id="EmailSelect" placeholder="eg: xyz@abc.com" autofocus>
</label>
<input type="button" onclick="removeAutofocus()" value="Remove Autofocus">
<div id="divDisplay"></div>
</fieldset>
</form>
<script>
   var divDisplay = document.getElementById("divDisplay");
   var inputEmail = document.getElementById("EmailSelect");
   divDisplay.textContent = 'Autofocus: '+inputEmail.autofocus;
   function removeAutofocus() {
      inputEmail.autofocus = false;
      divDisplay.textContent = 'Autofocus: '+inputEmail.autofocus;
   }
</script>
</body>
</html>

Output

This will produce the following output −

Before clicking ’Remove Autofocus’ button −

After clicking ‘Remove Autofocus’ button −

raja
Published on 24-Jul-2019 14:37:38
Advertisements