onKeyPress question

Discussion in 'HTML' started by Eric, Oct 2, 2005.

  1. Eric

    Eric Guest

    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
     
    Eric, Oct 2, 2005
    #1
    1. Advertisements

  2. Eric

    Dima Gofman Guest

    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
     
    Dima Gofman, Oct 2, 2005
    #2
    1. Advertisements

  3. Eric

    Eric Guest



    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, Oct 2, 2005
    #3
  4. Eric

    Eric Guest


    Ah ha! I changed the "diplay" to 'display' and that fixed it
     
    Eric, Oct 2, 2005
    #4
  5. Eric

    Dima Gofman Guest

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

    oh yeah, my fault, sorry about that
     
    Dima Gofman, Oct 3, 2005
    #5
    1. Advertisements

Ask a Question

Want to reply to this thread or ask your own question?

You'll need to choose a username for the site, which only take a couple of moments (here). After that, you can post your question and our members will help you out.