通过按Enter触发绑定到HTML按钮的JavaScript函数.(不使用Tab键)

Triggering JavaScript function tied to an HTML button by pressing Enter. (Without using Tab key)

本文关键字：函数 JavaScript Tab 按钮 Enter HTML 绑定      更新时间：2023-09-26

我的意图是创建一个按钮，可以触发JavaScript函数(警告"按钮工作!")绑定到它按回车键。但它只有在使用Tab键突出显示按钮后才能工作。我尝试过JavaScript和JQuery解决方案，但没有成功。我怎样才能使它工作没有摆弄Tab键?下面是代码:

<html>
  <head>
    <title>Enter Press Test</title>
  </head>
  <body>
  <p style="text-align: center;" >
    <button id="button1" onclick="alert('Button works!');" onkeypress="handle(event)">
     Start Test
    </button>
  </p> 
    <!--<script type="text/javascript"> 
        function handle(e) {            // JavaScript solution
            if (e.keyCode === 13) {
                alert("Button works!");
            }
        }
    </script>-->
    <script type="text/javascript">
        $("#button1").keyup(function(event) {     // JQuery solution 
            if (event.keyCode == 13) {
                $("#button1").click();
            }
        });
    </script> 
    <script type="text/javascript" scr='./scritps/jquery-3.1.1.min.js'></script>
  </body>
</html>

将事件监听器添加到document元素而不是#button1:

$(document).keyup(function(event) {
  if (event.keyCode == 13) {
    $("#button1").click();
  }
});
$('#button1').click(function(){
   alert('Button works!');
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<html>
<head>
  <title>Enter Press Test</title>
</head>
<body>
  <p style="text-align: center;">
    <button id="button1">
      Start Test
    </button>
  </p>
</body>
</html>

您应该将事件处理程序附加到document，以便任何元素都可以接收keypress事件，并使其在DOM中冒泡并在最高点捕获。还要注意，您应该在过时的on*事件属性上使用不引人注目的事件处理程序。试试这个:

$(document).keypress(function(e) {
  if (e.keyCode == 13) {
    $("#button1").click();
  }
});
$('#button1').click(function() {
  alert('Button works!');
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<p style="text-align: center;">
  <button id="button1">
    Start Test
  </button>
</p>

通常，当您侦听按键事件时，按钮或文本输入将具有焦点，因此我们将侦听特定元素上的按键事件。由于您只有按钮而没有输入，因此可以侦听窗口全局对象上的按键，但是每次在整个页面上按下enter键时都会发出警报。

为了记录，这个片段"工作"不使用选项卡，但我认为你最好添加一些其他类型的输入/s，你可以用它来捕捉按键事件。我可能还漏掉了一些背景。

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<html>
  <head>
    <title>Enter Press Test</title>
  </head>
  <body>
  <p style="text-align: center;" >
    <button id="button1" onclick="alert('Button works!');" onkeypress="handle(event)">
     Start Test
    </button>
  </p> 
    <!--<script type="text/javascript"> 
        function handle(e) {            // JavaScript solution
            if (e.keyCode === 13) {
                alert("Button works!");
            }
        }
    </script>-->
    <script type="text/javascript">
        $(window).keyup(function(event) {     // JQuery solution 
            if (event.keyCode == 13) {
                $("#button1").click();
            }
        });
    </script> 
    <script type="text/javascript" scr='./scritps/jquery-3.1.1.min.js'></script>
  </body>
</html>

您可以这样使用。绑定.on()方法中的事件。不需要为它写不同的事件。正如我提到的，在使用它之前包括Jquery。

<html>
  <head>
    <title>Enter Press Test</title>
    <script type="text/javascript" scr='./scritps/jquery-3.1.1.min.js'></script>
  </head>
  <body>
  <p style="text-align: center;" >
    <button id="button1" onclick="alert('Button works!');" onkeypress="handle(event)">
     Start Test
    </button>
  </p> 
    <!--<script type="text/javascript"> 
        function handle(e) {            // JavaScript solution
            if (e.keyCode === 13) {
                alert("Button works!");
            }
        }
    </script>-->
    <script type="text/javascript">
        $(document).on('keyup mouseup', '#button1', function(event) {       // JQuery solution 
            $("#button1").click(); //fire the event, on mouse click
            if (event.keyCode == 13) {  //fire the event on enter key press
                $("#button1").click();
            }
        });
    </script> 
  </body>
</html>

如果您想在不按按钮的情况下输入/调用函数，只需按enter键，请将函数与文档按键事件绑定:

  $(document).keypress(function(e){
            if(e.which == 13){//Enter key pressed
                $("#button1").click();
            }
        });

如果你想要的是，当按钮不突出显示，那么它只是一个回车键，没有任何连接到按钮。

解决方案甚至不应该知道按钮的存在。

所以你可以这样做:

$(document).keypress(function(e) {
    if (e.which == "13") { 
        alert("this is enter key, but im not aware to the button"); 
    }       
});

    <html>
    <head>
    <title>Enter Press Test</title>
    </head>
    <body>
    <p style="text-align: center;" >
    <button id="button1" onclick="alert('Button works!');"onkeypress="handle(event)">
         Start Test
     </button>
     </p>
     <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
     <script type="text/javascript">
         $("#button1").focus();
               $("#button1").keyup(function(event) {     // JQuery solution 
                   if (event.keyCode == 13) {
                       $("#button1").click();
                   }
               });
   </script> 
   </body>
   </html>
相关文章：