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 trialFelix Sonnenholzer
14,654 PointsHow 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
15,719 PointsHi 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.
Daniel Newman
Courses Plus Student 10,715 PointsDon'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
15,719 PointsDaniel, this is for the to-do list project. http://teamtreehouse.com/library/interactive-web-pages-with-javascript
Felix Sonnenholzer
14,654 PointsThank 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 ;)
Felix Sonnenholzer
14,654 PointsFelix Sonnenholzer
14,654 PointsThank 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
15,719 PointsMarcus Parsons
15,719 PointsYou are very welcome, Felix! Any more questions on the code?