onKeyPress question

[Eric]

I have a little html calculator form that I've been playing with, you click
the buttons to enter data and operators. I wanted to add the ability to
also press keys instead of only being able to click on buttons.
here's a portion of what i have.

<div style="text-align:center">
<input id="display" style="width:120;text-align:right" readonly>
<br>
<input type="button" value=" 1 " onClick="display.value += '1'">
<input type="button" value=" 2 " onClick="display.value += '2'">
<input type="button" value=" 3 " onClick="display.value += '3'">
etc etc
<input type="button" value=" . " onClick="display.value += '.'">
<input type="button" value=" C " onClick="display.value = ''">
<br>
<input type="button" value=" x " onClick="display.value += ' x '">
<input type="button" value=" / " onClick="display.value += ' / '">
<input type="button" value=" - " onClick="display.value += ' - '">
<input type="button" value=" + " onClick="display.value += ' + '">
<br>
<input type="button" value=" sqrt " onClick="display.value =
Math.sqrt(display.value)">
<input type="button" value=" = " onClick="display.value =
eval(display.value)">
</div>

How do i add the onKeyPress so that both clicking and typing work?
Thanks
Eric

 

[Dima Gofman]

don't forget that there's accesskey attribute
http://www.w3schools.com/tags/ref_standardattributes.asp

Adding keypress event to elements is a bit more difficult than onclick
because you need to know which key was pressed and there's a bit of a
difference to how to do this for different browsers.

To do this the way you want you need to add onkeypress to the document
object, this way as long as the browser window is in focus (and if
using frames - as long as the frame is in focus) pressing a key will
generate an event. The script below is a bit lengthy but unfortunately
it's needed to get events to work in IE and Mozila (and other 'lower'
browsers) but you only to change the doStuff() function (just copy
paste if (character=='3') obj.value += '3'; lines.

<script type='text/javascript'>
/* from http://phrogz.net/JS/AttachEvent_js.txt */
function AttachEvent(obj,evt,fnc,useCapture){
if (!useCapture) useCapture=false;
if (obj.addEventListener){
obj.addEventListener(evt,fnc,useCapture);
return true;
} else if (obj.attachEvent) return obj.attachEvent("on"+evt,fnc);
else{
MyAttachEvent(obj,evt,fnc);
obj['on'+evt]=function(){ MyFireEvent(obj,evt) };
}
}
function MyAttachEvent(obj,evt,fnc){
if (!obj.myEvents) obj.myEvents={};
if (!obj.myEvents[evt]) obj.myEvents[evt]=[];
var evts = obj.myEvents[evt];
evts[evts.length]=fnc;
}
function MyFireEvent(obj,evt){
if (!obj || !obj.myEvents || !obj.myEvents[evt]) return;
var evts = obj.myEvents[evt];
for (var i=0,len=evts.length;i<len;i++) evts();
}
/*******/

function doStuff(e){
/* this bit is from http://www.quirksmode.org/ */
var code;
if (!e) var e = window.event;
if (e.keyCode) code = e.keyCode;
else if (e.which) code = e.which;
var character = String.fromCharCode(code);
/*******/
var obj=document.getElementById('display');
if (character=='1') obj.value += '1';
if (character=='2') obj.value += '2';
if (character=='3') obj.value += '3';
// and so on
}
AttachEvent(document,'keypress',doStuff,false);
</script>


the best site to find out about differences in event handling (and
events themselves) is http://www.quirksmode.org/ (click on Javascript
and then Events in the menu).

Another bit you should know

<input type="button" value=" 1 " onClick="display.value += '1'">

works only in IE and it shouldn't work at all, you need to specify what
"display" is, namely an object inside the document object:

<input type="button" value=" 1 "
onClick="document.getElementById("display").value += '1'">

Dima Gofman

 

[Eric]

don't forget that there's accesskey attribute
http://www.w3schools.com/tags/ref_standardattributes.asp

Adding keypress event to elements is a bit more difficult than onclick
because you need to know which key was pressed and there's a bit of a
difference to how to do this for different browsers.

To do this the way you want you need to add onkeypress to the document
object, this way as long as the browser window is in focus (and if
using frames - as long as the frame is in focus) pressing a key will
generate an event. The script below is a bit lengthy but unfortunately
it's needed to get events to work in IE and Mozila (and other 'lower'
browsers) but you only to change the doStuff() function (just copy
paste if (character=='3') obj.value += '3'; lines.

<script type='text/javascript'>
/* from http://phrogz.net/JS/AttachEvent_js.txt */
function AttachEvent(obj,evt,fnc,useCapture){
if (!useCapture) useCapture=false;
if (obj.addEventListener){
obj.addEventListener(evt,fnc,useCapture);
return true;
} else if (obj.attachEvent) return obj.attachEvent("on"+evt,fnc);
else{
MyAttachEvent(obj,evt,fnc);
obj['on'+evt]=function(){ MyFireEvent(obj,evt) };
}
}
function MyAttachEvent(obj,evt,fnc){
if (!obj.myEvents) obj.myEvents={};
if (!obj.myEvents[evt]) obj.myEvents[evt]=[];
var evts = obj.myEvents[evt];
evts[evts.length]=fnc;
}
function MyFireEvent(obj,evt){
if (!obj || !obj.myEvents || !obj.myEvents[evt]) return;
var evts = obj.myEvents[evt];
for (var i=0,len=evts.length;i<len;i++) evts();
}
/*******/

function doStuff(e){
/* this bit is from http://www.quirksmode.org/ */
var code;
if (!e) var e = window.event;
if (e.keyCode) code = e.keyCode;
else if (e.which) code = e.which;
var character = String.fromCharCode(code);
/*******/
var obj=document.getElementById('display');
if (character=='1') obj.value += '1';
if (character=='2') obj.value += '2';
if (character=='3') obj.value += '3';
// and so on
}
AttachEvent(document,'keypress',doStuff,false);
</script>


the best site to find out about differences in event handling (and
events themselves) is http://www.quirksmode.org/ (click on Javascript
and then Events in the menu).

Another bit you should know

<input type="button" value=" 1 " onClick="display.value += '1'">

works only in IE and it shouldn't work at all, you need to specify what
"display" is, namely an object inside the document object:

<input type="button" value=" 1 "
onClick="document.getElementById("display").value += '1'">

Dima Gofman

I tried the onClick="document.getElementById("display").value += '1'"
change but it doesnt work in either IE or mozilla - is there something
missing there?
I'll play with the js you posted, thanks for that.
Thanks
Eric

 

[Eric]

don't forget that there's accesskey attribute
http://www.w3schools.com/tags/ref_standardattributes.asp

Adding keypress event to elements is a bit more difficult than onclick
because you need to know which key was pressed and there's a bit of a
difference to how to do this for different browsers.

To do this the way you want you need to add onkeypress to the document
object, this way as long as the browser window is in focus (and if
using frames - as long as the frame is in focus) pressing a key will
generate an event. The script below is a bit lengthy but unfortunately
it's needed to get events to work in IE and Mozila (and other 'lower'
browsers) but you only to change the doStuff() function (just copy
paste if (character=='3') obj.value += '3'; lines.

<script type='text/javascript'>
/* from http://phrogz.net/JS/AttachEvent_js.txt */
function AttachEvent(obj,evt,fnc,useCapture){
if (!useCapture) useCapture=false;
if (obj.addEventListener){
obj.addEventListener(evt,fnc,useCapture);
return true;
} else if (obj.attachEvent) return obj.attachEvent("on"+evt,fnc);
else{
MyAttachEvent(obj,evt,fnc);
obj['on'+evt]=function(){ MyFireEvent(obj,evt) };
}
}
function MyAttachEvent(obj,evt,fnc){
if (!obj.myEvents) obj.myEvents={};
if (!obj.myEvents[evt]) obj.myEvents[evt]=[];
var evts = obj.myEvents[evt];
evts[evts.length]=fnc;
}
function MyFireEvent(obj,evt){
if (!obj || !obj.myEvents || !obj.myEvents[evt]) return;
var evts = obj.myEvents[evt];
for (var i=0,len=evts.length;i<len;i++) evts();
}
/*******/

function doStuff(e){
/* this bit is from http://www.quirksmode.org/ */
var code;
if (!e) var e = window.event;
if (e.keyCode) code = e.keyCode;
else if (e.which) code = e.which;
var character = String.fromCharCode(code);
/*******/
var obj=document.getElementById('display');
if (character=='1') obj.value += '1';
if (character=='2') obj.value += '2';
if (character=='3') obj.value += '3';
// and so on
}
AttachEvent(document,'keypress',doStuff,false);
</script>


the best site to find out about differences in event handling (and
events themselves) is http://www.quirksmode.org/ (click on Javascript
and then Events in the menu).

Another bit you should know

<input type="button" value=" 1 " onClick="display.value += '1'">

works only in IE and it shouldn't work at all, you need to specify what
"display" is, namely an object inside the document object:

<input type="button" value=" 1 "
onClick="document.getElementById("display").value += '1'">

Dima Gofman

I tried the onClick="document.getElementById("display").value += '1'"
change but it doesnt work in either IE or mozilla - is there something
missing there?
I'll play with the js you posted, thanks for that.
Thanks
Eric

Ah ha! I changed the "diplay" to 'display' and that fixed it

 

[Dima Gofman]

|
| Ah ha! I changed the "diplay" to 'display' and that fixed it
|

oh yeah, my fault, sorry about that