Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

JavaScript Interactive Web Pages with JavaScript Traversing and Manipulating the DOM with JavaScript Perfect

Felix Sonnenholzer
Felix Sonnenholzer
14,654 Points
Posted by Felix Sonnenholzer
Felix Sonnenholzer
14,654 Points

How to remove ".editMode" when the focus disappears

Hello,

I added an eventlistener, so that the focus is automatically in the text field to edit the input.

Now I wanted to add something, that when the focus isn't on the text field anymore, for example when deciding to add something new instead. I know that you have to remove the ".editMode", and I tried a few things, but it doesn't work.

Thank you guys in advance

2 Answers

Marcus Parsons
Marcus Parsons
15,719 Points

Hi Felix,

I created a snapshot of my workspace that implements the blur functionality you're looking for. Here is the snapshot: https://w.trhou.se/ockk2leqwi

I added a few new things that you'll see comments for. The blur event is the event that happens when the target element doesn't have focus anymore. I added the blur listener inside of the editTask() function. I also added a new function right after editTask called switchThisInputToLabel. And then, near the very bottom, I added my own for loop that binds that blur event to any current edit inputs that are in the task handlers.

I left you comments for each line of code in the snapshot! I hope that helps.

Felix Sonnenholzer
Felix Sonnenholzer
14,654 Points
Felix Sonnenholzer
Felix Sonnenholzer
14,654 Points

Thank you Marcus. It works.

I was a little bit too fixated on 'focus' instead of going for the 'blur'-event. Included it in my code.

Thank you very much

Marcus Parsons
Marcus Parsons
15,719 Points

You are very welcome, Felix! Any more questions on the code?

Daniel Newman
PLUS
Daniel Newman
Courses Plus Student 10,715 Points
Daniel Newman
Daniel Newman
Courses Plus Student 10,715 Points

Don't you mind to show jQuery example or should it be the pure JS? 

$('.someSelector').on('mouseenter', function(){...})
                  .on('mouseleave', function(){...});

Still not shure what the class "editMode" for. If you want to toggle "disabled" attribute here some problem - you should make overlay div (not sure that is still acual now), because disabled input elements can't handle jQuery mouse events.

Please, give more information about your problem and provide us with the code.

Marcus Parsons
Marcus Parsons
15,719 Points

Daniel, this is for the to-do list project. http://teamtreehouse.com/library/interactive-web-pages-with-javascript

Felix Sonnenholzer
Felix Sonnenholzer
14,654 Points
Felix Sonnenholzer
Felix Sonnenholzer
14,654 Points

Thank you for you fast answer Daniel. I was looking for a pure JS solution, but it's nice to see how it would work with jquery :)

Here is a snapshot to the project, if you want to take a look at it. https://w.trhou.se/atfyhoberv

Also thank you Marcus for answering Daniel in my place ;)