Fatal编程技术网
  • javascript/
  • 当用户按enter键时运行JavaScript函数

当用户按enter键时运行JavaScript函数

javascript html

当用户按enter键时运行JavaScript函数,javascript,html,dom-events,Javascript,Html,Dom Events,我用HTML制作了一个具有特定属性的计算器，我希望用户能够按enter键同时显示display1（）和display2（）。 换句话说，我希望enter键触发按钮两者 以下是我的代码，以及我迄今为止尝试添加的代码： <!DOCTYPE html> <html> <head> <title>Square Yards Calculator</title> </head> <body

我用HTML制作了一个具有特定属性的计算器，我希望用户能够按enter键同时显示
display1（）
和
display2（）
。
换句话说，我希望enter键触发按钮
两者

以下是我的代码，以及我迄今为止尝试添加的代码：

<!DOCTYPE html>
<html>
    <head>
        <title>Square Yards Calculator</title>
    </head>

    <body>
        <div id='calc-contain'>

          <form name="calculator">

            <input type="text" name="answer" />
            <br>

            <input type="button" value=" 1 " onclick="calculator.answer.value += '1'" />
            <input type="button" value=" 2 " onclick="calculator.answer.value += '2'" />
            <input type="button" value=" 3 " onclick="calculator.answer.value += '3'" />
            <input type="button" value=" + " onclick="calculator.answer.value += '+'" />
            <br/>

            <input type="button" value=" 4 " onclick="calculator.answer.value += '4'" />
            <input type="button" value=" 5 " onclick="calculator.answer.value += '5'" />
            <input type="button" value=" 6 " onclick="calculator.answer.value += '6'" />
            <input type="button" value=" - " onclick="calculator.answer.value += '-'" />
            </br>

            <input type="button" value=" 7 " onclick="calculator.answer.value += '7'" />
            <input type="button" value=" 8 " onclick="calculator.answer.value += '8'" />
            <input type="button" value=" 9 " onclick="calculator.answer.value += '9'" />
            <input type="button" value=" Flex61 "   onclick="display1()" />
            </br>

            <input type="button" value=" c " onclick="calculator.answer.value = '',
                                document.getElementById('printhere1').innerHTML= '',
                                document.getElementById('printhere2').innerHTML= ''" />

            <input type="button" value=" 0 " onclick="calculator.answer.value += '0'" />
            <input type="button" value=" Both " onclick="display1(),display2()" />
            <input type="button" value=" Gap55 "    onclick="display2()" />
            </br>


          </form>
          <div id="agh">
            <p>Enter how many Square yards (SY) you are covering</p>
            <p id="printhere1"></p>
            <p id="printhere2"></p>
          </div>
        </div>

        <script type="text/javascript">
          function display1(){
            //Assigning the variable to the user input
            var squareyards = eval(calculator.answer.value);
            if (squareyards < 0 || squareyards == null){
                squareyards = 0
            }
            var pounds = 5
            pounds = squareyards * pounds
            // to print the input here
            document.getElementById("printhere1").innerHTML = "For "+ squareyards + " SY sou need: "+ pounds + " lbs of Elasto Flex61";
            }

            function display2(){
                //Assigning the variable to the user input
                var squareyards = eval(calculator.answer.value);
                if (squareyards < 0 || squareyards == null){
                    squareyards = 0
                }
                var rolls = 9
                rolls = Math.ceil(squareyards * rolls / 103)
                // to print the input here
                document.getElementById("printhere2").innerHTML = "For "+ squareyards + " SY sou need: "+ rolls + " Rolls of Gap55 Smooth";
            }
            $(function(){  
                $(':text').bind('keydown',function(e){ //on keydown for all textboxes  
                    if(e.keyCode==13){ //if this is enter key  
                        e.preventDefault();
                        e.display1();
                        e.display2();
                    }             
                });               
            });  

        </script>

    </body>
</html>


平方码计算器










输入要覆盖的面积（SY）





函数display1（）{
//将变量分配给用户输入
var squareyards=eval（计算器、答案、值）；
如果（平方码<0 | |平方码==null）{
平方码=0
}
变量磅=5
磅=平方码*磅
//在这里打印输入
document.getElementById（“printhere1”）.innerHTML=“对于”+squareyards+”SY sou需要：“+lbs+”lbs的弹性体Flex61”；
}
函数display2（）{
//将变量分配给用户输入
var squareyards=eval（计算器、答案、值）；
如果（平方码<0 | |平方码==null）{
平方码=0
}
var辊=9
转鼓=数学单位（平方码*转鼓/103）
//在这里打印输入
document.getElementById（“printhere2”）.innerHTML=“对于”+squareyards+”SY sou需要：“+rolls+”卷Gap55平滑”；
}
$（函数（）{
$（':text'）.bind（'keydown'，函数（e）{//on keydown用于所有文本框
如果（e.keyCode==13）{//如果这是输入键
e、 预防默认值（）；
e、 display1（）；
e、 显示2（）；
}             
});               
});
你就快到了。看起来您混合使用了本地JavaScript、
document.getElementById
和jQuery来实现按键功能。jQuery不是必需的，所以我建议对所有内容都使用原生JavaScript

所以我要重构这一点：

$（函数（）{
$（':text'）.bind（'keydown'，函数（e）{//on keydown用于所有文本框
如果（e.keyCode==13）{//如果这是输入键
e、 预防默认值（）；
e、 display1（）；
e、 显示2（）；
}             
});               
});
要成为本机JavaScript，请执行以下操作：

//捕获整个页面上的enter按钮事件
文档。addEventListener（'keydown'，getAnswer）；
//我把它作为一个单独的函数，以防你想重复使用
函数getAnswer（e）{
如果（e.keyCode==13）{//如果这是输入键
e、 预防默认值（）；
display1（）；
显示2（）；
}             
}
这是一张工作票

然而，这只是让它工作的第一步。如@certainperformance所说，下一步将是从单击“清除”按钮的“清除”按钮中删除
文档.getElementById
并将其移动到单独的函数

希望这能有所帮助。

，他们有一个疯狂的范围链，需要全球污染，并且有一些问题。使用
addEventListener
insteadHi@Cruxer，我在这里举了一个例子，当你按enter键时，你可以看到消息“hello”，如果按另一个键你什么也看不到。