javascript - 停止输入字段内的按键弹出窗口

Question

我正在尝试创建一个搜索模式，当用户按 s 时，它将运行一个搜索框。它可以工作，但有两个问题:

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

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

Answer 1

我从评论中看到，您可能改变了申请中的方法，但考虑到它的学术值(value) - 回答所写的问题:

您可以使用 .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>

更新:

我还对第三个演示进行了一些调整，以向您展示如何将其变成真正的模式 - 因此不需要 jQueryUI 或任何其他预制模式。您可以看到它们在幕后如何工作。基本上，您需要一个覆盖层(只是覆盖整个屏幕的 div)，其 z-index 高于页面上除模式对话框之外的任何其他内容。。然后，您需要模态对话框结构(只是一个普通的 div，里面有东西)，它被定位(使用 z-index)位于覆盖层的顶部。是的，就是这么简单。