Question

我正在编写一个带有几个文本框和一些按钮的程序，并在这些按钮的单击事件上调用javascript函数。此外，我想要功能键（F2，F4等），以允许用户调用这些javascript函数。以下代码运行正常并调用正确的函数，但问题是当我按下具有相同键码的键（q = 113，r = 114，s = 115，t = 116，u = 117，v = 118）时，这些函数执行。

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>Function Keys Demo</title>
    <style type="text/css" media="all">
    .btn{
        min-width: 200px;
    }
    </style>

    <script language="javascript" type="text/javascript">

     if(document.addEventListener){ //code for Moz
       document.addEventListener("keydown",keyCapt,false); 
       document.addEventListener("keyup",keyCapt,false);
       document.addEventListener("keypress",keyCapt,false);
     }else{
       document.attachEvent("onkeydown",keyCapt); //code for IE
       document.attachEvent("onkeyup",keyCapt); 
       document.attachEvent("onkeypress",keyCapt); 
     }
     function keyCapt(e){
       if(typeof window.event!="undefined"){
        e=window.event;//code for IE
       }
       if(window.event && e.keyCode==113){ F2_Click();event.keyCode = 0; event.returnValue = false;}
       if(window.event && e.keyCode==114){ F3_Click(); event.keyCode = 0;event.returnValue = false;}
       if(window.event && e.keyCode==116) {F5_Click();event.keyCode = 0; event.returnValue = false;}
       if(window.event && e.keyCode==117) {F6_Click();event.keyCode = 0; event.returnValue = false;}
       if(window.event && e.keyCode==118) {F7_Click();event.keyCode = 0; event.returnValue = false;}
       alert(e.keyCode);
    }

    function F2_Click()
    {
        alert("Save Clicked");
        document.getElementById("txtLabNo").focus();
    }

    function F3_Click()
    {
        alert("Print Clicked");
        document.getElementById("txtLabNo").focus();

    }
    function F5_Click()
    {
        alert("F5 Clicked");
        document.getElementById("txtLabNo").focus();
    }
    function F6_Click()
    {
        alert("F6 Clicked");
        document.getElementById("txtLabNo").focus();
    }
    function F7_Click()
    {
        alert("Save & Print Clicked");
        document.getElementById("txtLabNo").focus();
    }

    </script>

</head>
<body onload="document.getElementById('txtLabNo').focus();">
    <form id="form1">
        <div>
            <table style="width: 900PX; border: solid thin black;">
                <colgroup>
                    <col style="width: 150px; text-align: left; vertical-align: top; padding: 5px;" />
                    <col style="width: 150px; text-align: left; vertical-align: top; padding: 5px;" />
                    <col style="width: 350px; text-align: left; vertical-align: top; padding: 5px;" />
                    <col style="width: 150px; text-align: center; vertical-align: top; padding: 5px;" />
                </colgroup>
                <tr>
                    <td>
                        Lab No.</td>
                    <td>
                        <input type="text" tabindex="1" id="txtLabNo" /></td>
                    <td rowspan="5">
                        &nbsp;</td>
                    <td rowspan="5">
                        <input class="btn" type="button" value="Save (F2)" tabindex="10" onclick="F2_Click();" /><br />
                        <input class="btn" type="button" value="Print (F3)" tabindex="11" onclick="F3_Click();" /><br />
                        <input class="btn" type="button" value="Button 5 (F5)" tabindex="12" onclick="F5_Click();" /><br />
                        <input class="btn" type="button" value="Button 6 (F6)" tabindex="13" onclick="F6_Click();" /><br />
                        <input class="btn" type="button" value="Save & Print (F7)" tabindex="14" onclick="F7_Click();" /><br />
                    </td>
                </tr>
                <tr>
                    <td>
                        Patient Name</td>
                    <td>
                        <input type="text" tabindex="2" id="txtName" /></td>
                </tr>
                <tr>
                    <td>
                        Age</td>
                    <td>
                        <input type="text" id="txtAge" tabindex="3" /></td>
                </tr>
                <tr>
                    <td>
                        Test</td>
                    <td>
                        <input type="text" id="txtTest" tabindex="4" /></td>
                </tr>
                <tr>
                    <td>
                        Result</td>
                    <td>
                        <input type="text" id="txtResult" tabindex="5" /></td>
                </tr>
            </table>
        </div>
    </form>
</body>
</html>

Answer 1

你可以使用shortcut.js

的库

现场演示： Abdennour JSFiddle

   shortcut.add("F2", function() {
    $('span').html("F2 أحسنت. لقد ضغطت على حرفي  C");
        });
    shortcut.add("F3", function() {
    $('span').html("أحسنت. لقد ضغطت على حرفي F3V");
        });

    });

功能键按下javascript自定义动作

1 个答案: