Clash Royale CLAN TAG#URR8PPP

onBlur for div with input

I have 2 input within a div and I want to do something when the user remove the focus away from the card1. The blur event listener that I attached to card1 is not working, how can I do this on a div?

input

div

card1

card1

div

$('.card').blur( (event) =>
console.log("blur")
);

<script
src="https://code.jquery.com/jquery-3.3.1.min.js"
integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8="
crossorigin="anonymous"></script>

<div class="card1">
<input class="title1">
<input class="content1">
</div>

<div class="card2">
<input class="title2">
<input class="content2">
</div>

card1

5 Answers
5

$(document).ready(function ()
$("input").blur(function ()
alert("This input field has lost its focus.");
);
);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="card">
<input class="title">
<input class="content">
</div>

Add tabindex="0" to the .card div, that allows you to focus the div.

tabindex="0"

.card

$('.card').blur( (event) =>
console.log("blur")
);

<script
src="https://code.jquery.com/jquery-3.3.1.min.js"
integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8="
crossorigin="anonymous"></script>

<div class="card" tabindex="0">
<input class="title">
<input class="content">
</div>

card1

card2

it is fine:

$(document).ready(function()

var flag=0;
$('.card1').hover( function()
flag=1
);
$('.card2').hover( function()
if(flag==1)

console.log("ok");
flag=0;

);
);

<div class="card1">
<input class="title1">
<input class="content1">
</div>
<div class="card2">
<input class="title2">
<input class="content2">
</div>


After some research I figured you can use document.activeElement to determine which input is focused

document.activeElement

var checked = false;
var currentElement;
var prevElement;
$("input").focus(function()
if(checked)
checked = false;
return;
else prevElement === "content1") && (currentElement === "title2"
);

<script
src="https://code.jquery.com/jquery-3.3.1.min.js"
integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8="
crossorigin="anonymous"></script>

<div class="card1">
Card1
<input id="title1">
<input id="content1">
</div>

<div class="card2">
Card2
<input id="title2">
<input id="content2">
</div>

The first part working with the checked variable is to make sure that the function doesn't run over and over again.

checked

The second part sets the current selected element and previously selected element to check if focus has moved from a div.

Also it is a good practice to use id instead of class for elements like these because id is unique but class is not.

id

class

id

class

You need to check focus on the input elements inside each parent and add some 'active' class to the parent. If you switch from one card to another you need to check if siblings are having active class.

$('.card1,.card2').find('input').focus( (event) =>
if (!$(event.target).parent().hasClass('active'))
alert("focus on " + $(event.target).closest('div').attr('class'))
$(event.target).closest('div').addClass('active');
else
if ($(event.target).closest('div').siblings().hasClass('active'))
$(event.target).closest('div').siblings().removeClass('active')


);

<script
src="https://code.jquery.com/jquery-3.3.1.min.js"
integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8="
crossorigin="anonymous"></script>
<div>
<div class="card1">
<input class="title">
<input class="content">
</div>
<br>

<div class="card2">
<input class="title">
<input class="content">
</div>
</div>

By clicking "Post Your Answer", you acknowledge that you have read our updated terms of service, privacy policy and cookie policy, and that your continued use of the website is subject to these policies.