1. Advanced DHTML Instructor Lesson • Navigation Tips • Keyboard Control

2. Navigation Tips • JavaScript may used to help a user navigate a page • The focus() and blur() event handlers can run JavaScript when a user enters or leaves a control. • You can use the focus() method to move the cursor

3. Example

4. HTML Code <p>Select Identity Type <input type="radio" name= "answer" id="rbs" value="S" onClick="someFunction();">Social Security Number <input id="ssn1_3" type="text" size="3" maxlength="3"> <input id="ssn4_5" type="text" size="2" maxlength="2"> <input id="ssn6_9" type="text" size="4" maxlength="4" onBlur="gotoFullName();"> <br><input type="radio" name= "answer" id="rbm" value="M" onClick="someFunction();">Mother's Maiden Name <input id="mname"type=text size="30" maxlength="30" onBlur="gotoFullName();"> <br><br> Enter Full Name: <input id="fullname" type="text" size="30" mamaxlength="30"> </p>

5. JavaScript Code function someFunction() { var myRBs = document.getElementById("rbs"); if (myRBs.checked) { var mySSN = document.getElementById("ssn1_3"); mySSN.focus(); } var myRBm = document.getElementById("rbm"); if (myRBm.checked) { var myMName= document.getElementById("mname"); myMName.focus(); } }

6. More JavaScript Code function gotoFullName() { var myFullName = document.getElementById("fullname"); myFullName.focus(); }

7. Exercise 6-6 • Make a form like this … • Make the cursor always go to the text field to the right of the radiobutton when checked

8. Keyboard Control • Accesskey • Detecting pressed Keys directly

9. AccessKey Examples • <a href="http://cnn.com" accessKey="C">CNN</a> • <input type=submit value="Click" accessKey="M" onclick="doSomething();"> • FireFox: Press SHIFT-ALT-accessKey • Internet Explorer: Press ALT-accessKey, then Enter

10. Keyboard Alerts <script language="JavaScript"> document.onkeydown = checkKeycode; function checkKeycode(e) { varkeycode; if (window.event) { keycode = window.event.keyCode; } else if (e) keycode = e.which; varmyCharacter = String.fromCharCode(keycode); alert("keycode: " + keycode + " which translates to: " + myCharacter); } </script> </head> <body> <h1>Press any key on your keyboard to see it's value!</h1>

11. Filter a List of Names • Demonstrate: filter_list.html • Code posted on class Web site as "Filtering a Name list using keyboard"

12. End