Question

63

Struggling to add a blur event listener

rated 0 times [ 64] [ 1] / answers: 1 / hits: 20132 / 10 Years ago, tue, august 12, 2014, 12:00:00

I have a searchbox on the site I work on and would like to track the search terms folk are looking for.

Since the searchbox auto guesses what someone is typing and searches for it, there is no click event.

In the console the textContent that I want when the blur happens is the .textContent of this:

myVar = document.querySelectorAll('.twitter-typeahead > span')[2]

But the value returned here is only not null when someone has actually typed something. So attaching a blur event seems the way to go. On the back of someones help on another forum I got this far in the console:

myVar.addEventListener('blur', function(){dataLayer.push({'event':'bla'})})

After typing this all in the console I don't see any values being pushed to the dataLayer which makes me think that the blur event is not working (as opposed to the dataLayer.push function.)

The page with the searchbox in question is here.

How would I attach a blur event to someone unfocussing the search box?

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

efrainjamiry

Add To Favorites

Follow

Total Points: 234

Total Questions: 110

Total Answers: 112

Location: French Southern and Antarctic Lands

Member since Fri, Jan 6, 2023

1 Year ago

answered 10 Years ago milo · Accepted Answer

You should add the blur listener to the search box, not a span:

searchbox = document.getElementById('searchboxID');

searchbox.addEventListener('blur', function() {

    var input = this.value;

    // Do whatever you want with the input

});