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?

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?

• javascript
• blur
• onblur
• google-tag-manager
• data-layers

2 Answers 2

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
});

ES6 provides even shorter possibilities:

let el = document.getElementById('id');
el.addEventListener('blur', () => console.log('blurred'));

Or if you need the element:

let el = document.getElementById('id');
el.addEventListener('blur', (event) => console.log(event.target));

Snippet:

let el = document.getElementById('id');
el.addEventListener('blur', (event) => console.log(`${event.target}: ${event.target.value}`));

<input id="id" />