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.
|