停止输入字段内的按键弹出

Question

我正在尝试创建一个搜索模式，当用户按下 时s，它将运行一个搜索框。它有效，但有两个问题：当加载s模态框时，如果用户再次按下，它将覆盖并再次加载模态框。当按下 时，不应在 textarea 或输入字段中加载 Modal 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>

更新：

我还稍微调整了第三个演示，向您展示如何将其转换为真正的模态——因此不需要 jQueryUI 或任何其他预制模态。你可以看看它们是如何在引擎盖下工作的。基本上，您需要一个覆盖（只是一个覆盖整个屏幕的 div），其 z-index 高于页面上除模态对话框之外的任何其他内容。然后你需要模态对话框结构（只是一个普通的 div，里面有东西），它被定位（使用 z-index）以坐在叠加层的顶部。是的，就是这么简单。

Answer 2

你试过这样的条件吗？

if($('#search-modal').is(':visible')){

 //do other things

}