How Can I Use HTML DOM Blur Method With JavaScript

Posted By Bajarangi soft , Posted On 27-09-2020

In Java script we can add and remove focus from an element. today we are going to discuss how to blur method in java script

How Can I Use HTML DOM Blur Method With JavaScript

The blur() method is used to remove focus from an element.

Tip: Use the focus() method to give focus to an element.

Syntax and Usage

HTMLElementObject.blur()

Example(1)

<a id="Link" href="https://blog.bajarangisoft.com/blogs">Visit Bajarangisoft.com</a>

<input class="btn btn-primary" type="button" onclick="getfocus()" value="Get focus">
<input class="btn btn-primary" type="button" onclick="losefocus()" value="Lose focus">
<script>
    function getfocus() {
        document.getElementById("Link").focus();
    }

    function losefocus() {
        document.getElementById("Link").blur();
    }
</script>

In above example when you click on button it will give focus and/or remove focus from the link above

Example(2)

<input type="text" id="Text" value="A text field">

<input class="btn btn-primary" type="button" onclick="getfocus()" value="Get focus">
<input class="btn btn-primary" type="button" onclick="losefocus()" value="Lose focus">
<script>
    function getfocus() {
        document.getElementById("Text").focus();
    }

    function losefocus() {
        document.getElementById("Text").blur();
    }
</script>

In above example when you click on button it will give focus and/or remove focus from the text field.

Complete code for HTML DOM Blur Method With JavaScript

<!DOCTYPE html>
<html>
<head>
    <title>HTML DOM Blur Method With JavaScript</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
</head>
<style>
    h1 {
        color: red;
    }
    a{
        font-size: 30px;
    }
</style>
<body>
<div class="container">
    <br>
    <br>
    <div class="text-center">
        <h1>HTML DOM Blur Method With JavaScript</h1>
    </div>
    <br>
    <div class="well">
        <a id="Link" href="https://blog.bajarangisoft.com/blogs">Visit Bajarangisoft.com</a>
        <br>
        <br>
        <input type="text" id="Text" value="A text field">
        <br>
        <br>
        <input class="btn btn-primary" type="button" onclick="getfocus()" value="Get focus">
        <input class="btn btn-primary" type="button" onclick="losefocus()" value="Lose focus">
        <br>
        <br>
        <input class="btn btn-primary" type="button" onclick="getfocus_input()" value="Get focus to Input">
        <input class="btn btn-primary" type="button" onclick="losefocus_input()" value="Lose focus to Input">
    </div>
    <br>
</div>
</body>
</html>
<script>
    function getfocus() {
        document.getElementById("Link").focus();
    }

    function losefocus() {
        document.getElementById("Link").blur();
    }

    function getfocus_input() {
        document.getElementById("Text").focus();
    }

    function losefocus_input() {
        document.getElementById("Text").blur();
    }
</script>

Related Post