如何使用jQuery检测键盘上的Enter键?

2020/09/21 13:01 · javascript ·  · 0评论

我想检测用户是否按下了EnterjQuery。

这怎么可能?需要插件吗?

编辑:看来我需要使用该keypress()方法。

我想知道是否有人知道该命令是否存在浏览器问题-就像我应该知道的浏览器兼容性问题一样?

jQuery的全部要点是,您不必担心浏览器的差异。我很确定您可以放心enter在所有浏览器中都为13。因此,请记住这一点:

$(document).on('keypress',function(e) {
    if(e.which == 13) {
        alert('You pressed enter!');
    }
});

我写了一个小插件,使绑定“按Enter键”事件更容易:

$.fn.enterKey = function (fnc) {
    return this.each(function () {
        $(this).keypress(function (ev) {
            var keycode = (ev.keyCode ? ev.keyCode : ev.which);
            if (keycode == '13') {
                fnc.call(this, ev);
            }
        })
    })
}

用法:

$("#input").enterKey(function () {
    alert('Enter!');
})

我无法得到通过@Paolo Bergantino发布工作的代码,但是当我把它改成$(document)e.which,而不是e.keyCode后来我发现它完美地工作。

$(document).keypress(function(e) {
    if(e.which == 13) {
        alert('You pressed enter!');
    }
});

链接到JS Bin上的示例

我发现这与跨浏览器更兼容:

$(document).keypress(function(event) {
    var keycode = event.keyCode || event.which;
    if(keycode == '13') {
        alert('You pressed a "enter" key in somewhere');    
    }
});

您可以使用jquery'keydown'事件句柄执行此操作

   $( "#start" ).on( "keydown", function(event) {
      if(event.which == 13) 
         alert("Entered!");
    });

使用event.key和现代JS!

$(document).keypress(function(event) {
    if (event.key === "Enter") {
        // Do something
    }
});

或没有jQuery:

document.addEventListener("keypress", function onEvent(event) {
    if (event.key === "Enter") {
        // Do something better
    }
});

Mozilla文件

支持的浏览器

我花了一些时间想出这个解决方案,希望对您有所帮助。

$(document).ready(function(){

  $('#loginforms').keypress(function(e) {
    if (e.which == 13) {
    //e.preventDefault();
    alert('login pressed');
    }
  });

 $('#signupforms').keypress(function(e) {
    if (e.which == 13) {
      //e.preventDefault();
      alert('register');
    }
  });

});

有一个keypress()事件方法。Enter键的ascii号为13,并且与所使用的浏览器无关。

如果您还想捕获修改后的Enter印刷机(例如ctrl-enter或shift-enter),上面对Andrea的回答的较小扩展使helper方法更有用。例如,此变体允许进行绑定,例如:

$('textarea').enterKey(function() {$(this).closest('form').submit(); }, 'ctrl')

当用户按ctrl-enter并专注于该表单的文本区域时提交表单。

$.fn.enterKey = function (fnc, mod) {
    return this.each(function () {
        $(this).keypress(function (ev) {
            var keycode = (ev.keyCode ? ev.keyCode : ev.which);
            if ((keycode == '13' || keycode == '10') && (!mod || ev[mod + 'Key'])) {
                fnc.call(this, ev);
            }
        })
    })
}

(另请参见Ctrl +在TEXTAREA中输入jQuery

在某些情况下,您可能需要ENTER针对页面的特定区域而不是页面的其他区域隐藏关键字,例如下面的页面包含带有SEARCH字段标题 <div>

我花了点时间弄清楚如何做到这一点,我在这里为社区发布了这个简单而完整的示例。

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
  <title>Test Script</title>
  <script src="/lib/js/jquery-1.7.1.min.js" type="text/javascript"></script>
  <script type="text/javascript">
    $('.container .content input').keypress(function (event) {
      if (event.keyCode == 10 || event.keyCode == 13) {
        alert('Form Submission needs to occur using the Submit button.');
        event.preventDefault();
      }
    });
  </script>
</head>
  <body>
    <div class="container">
      <div class="header">
        <div class="FileSearch">
          <!-- Other HTML here -->
        </div>
      </div>
      <div class="content">
        <form id="testInput" action="#" method="post">
        <input type="text" name="text1" />
        <input type="text" name="text2" />
        <input type="text" name="text3" />
        <input type="submit" name="Submit" value="Submit" />
        </form>
      </div>
    </div>
  </body>
</html>

链接到JSFiddle Playground:该[Submit]按钮不执行任何操作,但是ENTER从“文本框”控件之一中按下将不会提交表单。

尝试此操作以检测按下Enter键。

$(document).on("keypress", function(e){
    if(e.which == 13){
        alert("You've pressed the enter key!");
    }
});

参见演示@ 检测键盘上的Enter键

由于该keypress事件未包含在任何官方规范中,因此使用该事件时遇到的实际行为可能会因浏览器,浏览器版本和平台而异。

$(document).keydown(function(event) {
  if (event.keyCode || event.which === 13) {
    // Cancel the default action, if needed
    event.preventDefault();
    //call function, trigger events and everything tou want to dd . ex : Trigger the button element with a click
    $("#btn").trigger('click');
  }
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<button id="btn" onclick="console.log('Button Pressed.')">&nbsp</button>

我希望它会有用!

我用过$(document).on("keydown")

在某些浏览器keyCode上不受支持。同样,which如果keyCode不支持,则需要使用which,反之亦然。

$(document).on("keydown", function(e) {
  const ENTER_KEY_CODE = 13;
  const ENTER_KEY = "Enter";
  var code = e.keyCode || e.which
  var key = e.key
  if (code == ENTER_KEY_CODE || key == ENTER_KEY) {
    console.log("Enter key pressed")
  }
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

检测用户是否按下Enter的简单方法是使用密钥号,输入密钥号= 13来检查设备中的密钥值

$("input").keypress(function (e) {
  if (e.which == 32 || (65 <= e.which && e.which <= 65 + 25)
                    || (97 <= e.which && e.which <= 97 + 25)) {
    var c = String.fromCharCode(e.which);
    $("p").append($("<span/>"))
          .children(":last")
          .append(document.createTextNode(c));
  } else if (e.which == 8) {
    // backspace in IE only be on keydown
    $("p").children(":last").remove();
  }
  $("div").text(e.which);
});

通过按Enter键,您将得到13的结果。使用键值,您可以调用函数或做任何您想做的事

        $(document).keypress(function(e) {
      if(e.which == 13) {
console.log("User entered Enter key");
          // the code you want to run 
      }
    });

如果您想在按下输入键后定位按钮,则可以使用代码

    $(document).bind('keypress', function(e){
  if(e.which === 13) { // return
     $('#butonname').trigger('click');
  }
});

希望对你有帮助

我认为最简单的方法是使用香草 javacript:

document.onkeyup = function(event) {
   if (event.key === 13){
     alert("enter was pressed");
   }
}
$(function(){
  $('.modal-content').keypress(function(e){
    debugger
     var id = this.children[2].children[0].id;
       if(e.which == 13) {
         e.preventDefault();
         $("#"+id).click();
       }
   })
});
$(document).keyup(function(e) {
    if(e.key === 'Enter') {
        //Do the stuff
    }
});
$(document).keydown(function (event) {
      //proper indentiation of keycode and which to be equal to 13.
    if ( (event.keyCode || event.which) === 13) {
        // Cancel the default action, if needed
        event.preventDefault();
        //call function, trigger events and everything tou want to dd . ex : Trigger the button element with a click
        $("#btnsearch").trigger('click');
    }
});
本文地址:http://javascript.askforanswer.com/ruheshiyongjqueryjiancejianpanshangdeenterjian.html
文章标签: ,   ,   ,   ,  
版权声明:本文为原创文章,版权归 javascript 所有,欢迎分享本文,转载请保留出处!

文件下载

老薛主机终身7折优惠码boke112

上一篇:
下一篇:

评论已关闭!