Emulation: Tab -> Enter, version 1
This page URL
is script on disk:
J:\\awww\\apl\\dev1\\oraed\\enter_tab_emul\\enter_tab_emul.html'
Souce code version 1
JS approaches of unobtrusive JavaScript, progressive enhancement,
and object detection.
<!DOCTYPE html> <html lang="HR"> <!-- http://dev1:8083/oraed/enter_tab_emul/enter_tab_emul.html J:\awww\apl\dev1\oraed\enter_tab_emul\enter_tab_emul.html <a href=""></a> <a href="#anchor_name"></a> TO JUMP TO <a name="anchor_name"></a> --> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>enter_tab_emul</title> <!-- HTML5 shiv library is open sourced JS generate elements of the new types, which making MS IE prior version 9 recognize, and style them appropriately. --> <!--[if lt IE 9]> <script src=”http://html5shiv.googlecode.com/svn/trunk/html5.js”> p </script> <![endif]-->
<link rel="stylesheet" href="./css/style01.css"> <link rel="stylesheet" href="./css/xxstyle02_tabs.css"> <link rel="stylesheet" href="./css/xxstyle02.css">
<!-- script src=”js/key_pressed.js”></script --> <SCRIPT LANGUAGE="JavaScript"> <!-- Begin // JS script in head page tag nextfield = "box1"; // name of first formfield on page // 1.1 rrgo of browser type indicator in version string : ver = navigator.appVersion; len = ver.length; notmsie = ""; for(rrgobtype = 0; rrgobtype < len; rrgobtype++) if (ver.charAt(rrgobtype) == "(") break; // in version string first char after first "(" is c for MS IE, // W for other browsers : // 1.2 is ibrowser IE ? : notmsie = (ver.charAt(rrgobtype+1).toUpperCase() != "C");
function keyDown(DnEvents) { // handles keypress // keypressed code : keypressed = (notmsie) ? DnEvents.which // W: Firefox, : window.event.keyCode // c: MS IE ; switch(keypressed) { // 1. enter key pressed : case 13: // nextfield we set up in form (LIKE ORACLE FORMS 6i) // if we finished all fields before submit-button-at-bottom : if (nextfield == 'done') return true; // standard ibrowder key pressed processing else { // SEND FOCUS TO NEXT FORM FIELD : eval('document.yourform.' + nextfield + '.focus()'); //does not work: eval('document.yourform.nextfield.focus()'); return false; } // standard ibrowser key pressed -> standard processing: // 35=end 36=home 33=pgup 34=pgdn 45=ins 46=del // 83=ctrl+s=alt+s case 83: // ctrl+s = alt+s *** open new tab & continue with PHP document.write('<h2>New tab is opened to continue with PHP</h2>'); return false; case 116: // F5 *** case 8: // backspace *** // case 9: // tab case 16: // shift case 17: // ctrl case 18: // alt // return true; // standard ibrowder key pressed processing //break; case 121: // F10 default: // 116=F5... return true; // standard ibrowder key pressed processing // FOR TESTING WHICH KEY IS PRESSED : comment above statement !! document.write('<h3>Ova tipka jo? nije omogu?ena u ovom programu
(javite informati?aru ako ju trebate za uobi?ajene
browserove aktivnosti). </h3>' +'<h3>--Kod (?ifra) tipke je : ' + keypressed + '</h3>' +'<h3>Kliknite tipku "Backspace" za povratak u prethodnu stranicu' + '</h3>' ); //eval('document.yourform.' + nextfield + '.value ='.keypressed); return false; }; // e n d s w i t c h key pressed /////////////// } // e n d f n
document.onkeydown = keyDown; // work together to analyze keystrokes if (notmsie) document.captureEvents(Event.KEYDOWN|Event.KEYUP); // End --> </script>
</head>
<body> <noscript>Your browser does not support JavaScript!</noscript> <table> <tr> <td> <center>
<h3>Emulation: Tab -> Enter, version 1</h3>
<!-- novalidate = disable HTML5 automatic form validation, so JS can do validation --> <form name=yourform id=”testform”
action="file:///J:\awww\apl\dev1\my_dev\enter_tab_emul\enter_tab_emul.html" novalidate> <fieldset><legend>f o r m name=yourform id=”testform” </legend> <div><label for=box1>Box 1 </label><input type=text
name=box1 id="box1" onFocus="nextfield ='box2';"/></div> <div><label for=box2>Box 2 </label><input type=text
name=box2 id="box2" onFocus="nextfield ='box3';" /></div>
<div><label for=box1>Box 3 </label><input type=text
name=box3 id="box3" onFocus="nextfield ='box1';" required /></div> <div><label for=submit>Spremi bla, bla </label><input type=submit
name=done id="done" value="Spremi (ctrl+s)" accesskey="s"
title="Klik za bla, bla [strl+s ili alt+s]" onFocus="nextfield ='box1';" /></div>
<!--input type=submit name=done value="Submit" accesskey="c" title="Klik za prijavu [alt+c]" -->
</fieldset> <SCRIPT LANGUAGE="JavaScript"> <!-- Begin // set cursor to some form field: //eval('document.'.this.form.'.box1.focus()'); eval('document.yourform.box1.focus()'); // End --> </script> </form> </center>
<SCRIPT LANGUAGE="JavaScript"> <!-- Begin //done in head tag: ver = navigator.appVersion; // ibrowser version //len = ver.length; // ver.charAt(rrgobtype+1) document.write( '<hr />JS SAYS: '+'<br/>' + 'navigator.appVersion = "' + ver + ' <-- ' + ver.charAt(rrgobtype+1) +' = first character after first "(" = ver.charAt(rrgobtype+1)' + '<center>' +'<font face="arial, helvetica" size="+1">Free JavaScripts provided ' +'by <a href="http://javascriptsource.com">http://javascriptsource.com</a>' +' or by <a href="http://javascript.internet.com">' +'http://javascript.internet.com</a>' +'</font>' +'</center>' ); // End --> </script>
Ronnie T. Moore, Web Site: The JavaScript Source :
Version 2
<SCRIPT LANGUAGE="JavaScript"> <!-- Begin
function getNextElement(field) {
var form = field.form;
// e is ordinary number of form element :
for ( var e = 0; e < form.elements.length; e++) {
if (field == form.elements[e]) {
break;
}
}
// next form element name :
return form.elements[++e % form.elements.length];
}
function myKeyAction(field, evt) {
if (evt.keyCode === 13) {
// keypressed is ***enter key : goto next form field*** :
if (evt.preventDefault) {
evt.preventDefault();
} else if (evt.stopPropagation) {
evt.stopPropagation();
} else {
evt.returnValue = false;
}
getNextElement(field).focus();
return false; // ignore keypressed
}
else {
// keypressed is ***not enter key*** :
return true; // standard browser processing of keypressed
}
}
// End --> </script>
And then you should just create your input texts or whatever
<input type="text" id="1" onkeydown="return myKeyAction(this,event)"/>
<input type="text" id="2" onkeydown="return myKeyAction(this,event)"/>
<input type="text" id="3" onkeydown="return myKeyAction(this,event)"/>
<input type="text" id="4" onkeydown="return myKeyAction(this,event)"/>
Here is a DIFFERENT IDEA:
- change on submit so that it calls fn instead of processing form
- in function check all the fields to see if they are blank
- focus on next blank field (that doesn't have a value)
- 1 to 3 when script runs (in runtime) behaves so :
user types a value into field1 ->
hit enter -> function runs
-> Fn sees that field1 is full, 2 isnt, so focus on field 2
-> when all fields are full, submit form for processing
If form has fields that can be blank, you could use a boolean array
that would keep track of which fields received focus using onfocus() event.
|