Question

我正在尝试创建一个搜索模式，当用户按下 s 时，它将运行一个搜索框。它有效，但是有两个问题：

加载模式时，如果用户再次按 s ，它将覆盖并再次加载模式框。
按 S 时，不应在文本区域或输入字段中加载模态。

$("body").bind('keyup', function(event) { 
    if (event.which == 83) {
        $('#search-modal').show();
    }
});

Answer 1

我从评论中看到，您可能已更改了应用程序中的方法，但出于学术上的价值-回答书面问题：

您可以使用.on()代替.bind() （自jQuery 1.7起已弃用）和.off()来添加/删除事件处理程序。

>

这将允许您根据需要打开/关闭该事件处理程序。

$("body").on('keyup', function(event) {
  if (event.which == 83) {
    $('#mdl').show();
    $('body').off('keyup'); //the "s" will only work once
  }
});
$('#mdl_closeX').click(function(){
  $('#mdl').hide();
});

#mdl {
  position: fixed;
  top: 10%;
  left: 25%;
  background: wheat;
  display:none;
}
#mdl_inner {padding:50px;}
#mdl_closeX{padding:5px;text-align:right;cursor:pointer;}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>

<div id="mdl">
  <div id="mdl_closeX"> X </div>
  <div id="mdl_inner">My Modal</div>
</div>

<h3>Click on the page body, then press the letter [ s ] </h3>
<p>The [s] binding will work only once. After closing the modal, pressing [s] will not open it again. </p>
<p>Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. </p>
<p>Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. </p>
<p>Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. </p>

这是一个修改后的示例，显示了当用户位于输入字段中时如何关闭事件处理程序：

$("body").on('keyup', function(event) {
  if (event.which == 83) {
    $('#mdl').show();
  }
});
$('#mdl_closeX').click(function(){
  $('#mdl').hide();
});

$('input').focus(function(){
  $('body').off('keyup'); //the "s" will only work once
});

$('input').blur(function(){
    $("body").on('keyup', function(event) {
        if (event.which == 83) {
            $('#mdl').show();
            $('body').off('keyup'); //the "s" will only work once
        }
    });
});

#mdl {
  position: fixed;
  top: 10%;
  left: 25%;
  background: wheat;
  display:none;
}
#mdl_inner {padding:50px;}
#mdl_closeX{padding:5px;text-align:right;cursor:pointer;}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>

<div id="mdl">
  <div id="mdl_closeX"> X </div>
  <div id="mdl_inner">My Modal</div>
</div>

<h3>Click on the page body, then press the letter [ s ] </h3>
<p>The [s] binding will work any time the user is NOT inside an input field. </p>

<div>
    When click in the input field, the "s" will be normalized. Next, click anywhere else on the body and the "s" will once again open the modal.
    <input type="text" />
</div>

这里是一个示例，显示了如何分配 Ctrl s 来打开搜索模式，而不仅仅是字母 s 。

因为没有成对的“ Ctrl + S”键码，所以我们必须分别跟踪每个键。因此，我们使用全局变量来跟踪是否已按下CTRL键，然后仅在将Ctrl键标记为按下时才监视“ s”。

var ctrldn = false;
$("body").on('keydown', function(event) {
  if (event.which == 17){
    ctrldn = true;
  }
});
$("body").on('keyup', function(event) {
  if (event.which == 17){
    ctrldn = false;
  }
});
$("body").on('keydown', function(event) {
  if (ctrldn && event.which == 83){
    $('#mdl, #olay').show();
    return false;
  }
});





$('#mdl_closeX').click(function(){
  $('#mdl, #olay').hide();
});

$('input').focus(function(){
  ctrldn = false;
  $('body').off('keyup'); //the "s" will only work once
});

$('input').blur(function(){
    $("body").on('keyup', function(event) {
        if (ctrldn && event.which == 83) {
            $('#mdl').show();
            $('body').off('keyup'); //the "s" will only work once
        }
    });
});

#olay{
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background:black;
  opacity: 0.6;
  z-index:9998;
  display:none;
}
#mdl {
  position: fixed;
  top: 10%;
  left: 25%;
  background: wheat;
  z-index:9999;
  display:none;
}
#mdl_inner {padding:50px;}
#mdl_closeX{padding:5px;text-align:right;cursor:pointer;}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>

<div id="olay"></div>
<div id="mdl">
  <div id="mdl_closeX"> X </div>
  <div id="mdl_inner">My Modal</div>
</div>

<h3>Click on the page body, then press [ Ctrl ] [ s ] </h3>
<p>[Ctrl] [s] will open the modal no matter where the user is, and will not interfere with the letter [s] by itself. </p>
<p><b>Note that it was necessary to use `return false` to suppress the default action of [Ctrl][s] within the browser</b></p>

<div>
    When click in the input field, the "s" works like the letter "s", and [Ctrl] [s] will open the modal (even in the input field)
    <input type="text" />
</div>

更新：

我还对第3个演示进行了一些微调，以向您展示如何将其转变为真正的模态-因此不需要jQueryUI或任何其他预制模态。您可以在后台看到它们的工作方式。基本上，您需要一个叠加层（只是一个覆盖整个屏幕的div），其z-index高于模式对话框页面上的其他任何元素。然后，您需要模态对话框结构（只是一个普通的div，里面有东西），该结构位于（使用z-index）位于叠加层的顶部。是的，就是这么简单。

Answer 2

您是否尝试过这种情况？

if($('#search-modal').is(':visible')){
 //do other things
}

在输入字段中停止按键弹出

2 个答案:

更新：