Emulation: Tab -> Enter, version 1

f o r m name=yourform id="testform"
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:

  1. change on submit so that it calls fn instead of processing form
  2. in function check all the fields to see if they are blank
  3. focus on next blank field (that doesn't have a value)
  4. 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.