JavaScript Events · Lesson 17 of 20

Focus, Type, Leave

Lesson 17 · 📝 Focus, Type, Leave

Three events on one text box: clicking in, typing, and clicking out.

0 / 14

1
Type this next
Type var div = $('div'); - make a variable div for the empty space under the text box
2
Type var txt = 'You focused the input!'; - txt holds the words for clicking in
3
Type var txt1 = 'You typed!'; - txt1 holds the words for typing
4
Type var txt2 = 'You left the input!'; - txt2 holds the words for clicking out
5
Type var input = $('input'); - make a variable input that holds the text box
6
Type input.focus(function(){ - when you click into the text box, run this function
7
Type div.text(txt); - show You focused the input!
8
Type }); - end the focus function
9
Type input.keyup(function(){ - when you let go of a key while typing, run this function
10
Type div.text(txt1); - show You typed!
11
Type }); - end the keyup function
12
Type input.blur(function(){ - when you click out of the text box, run this function
13
Type div.text(txt2); - show You left the input!
14
Type }); - end the blur function - now click in, type, and click out

Your code · JS

Type var div = $('div'); - make a variable div for the empty space under the text box

Your page

📄 Untitled

🔒 www.my-codemoji-page.com