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

Question

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

1. 当加载s模态框时，如果用户再次按下，它将覆盖并再次加载模态框。

2. 当按下 时，不应在 textarea 或输入字段中加载 Modal S。

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

Answer 1

我从评论中看到您可能已经改变了您在申请中的方法，但为了它的学术价值 - 回答书面问题：您可以使用.on()代替.bind()&nbsp;（自 jQuery 1.7 起已弃用）和.off()添加/删除事件处理程序。这将允许您根据需要打开/关闭该事件处理程序。$("body").on('keyup', function(event) {&nbsp; if (event.which == 83) {&nbsp; &nbsp; $('#mdl').show();&nbsp; &nbsp; $('body').off('keyup'); //the "s" will only work once&nbsp; }});$('#mdl_closeX').click(function(){&nbsp; $('#mdl').hide();});#mdl {&nbsp; position: fixed;&nbsp; top: 10%;&nbsp; left: 25%;&nbsp; background: wheat;&nbsp; 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">&nbsp; <div id="mdl_closeX"> X </div>&nbsp; <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) {&nbsp; if (event.which == 83) {&nbsp; &nbsp; $('#mdl').show();&nbsp; }});$('#mdl_closeX').click(function(){&nbsp; $('#mdl').hide();});$('input').focus(function(){&nbsp; $('body').off('keyup'); //the "s" will only work once});$('input').blur(function(){&nbsp; &nbsp; $("body").on('keyup', function(event) {&nbsp; &nbsp; &nbsp; &nbsp; if (event.which == 83) {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; $('#mdl').show();&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; $('body').off('keyup'); //the "s" will only work once&nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; });});#mdl {&nbsp; position: fixed;&nbsp; top: 10%;&nbsp; left: 25%;&nbsp; background: wheat;&nbsp; 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">&nbsp; <div id="mdl_closeX"> X </div>&nbsp; <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>&nbsp; &nbsp; 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.&nbsp; &nbsp; <input type="text" /></div>这是一个示例，显示如何分配Ctrl&nbsp;s以打开搜索模式，而不仅仅是字母s。因为“Ctrl+S”没有成对的键码，我们必须分别跟踪每个键。所以我们使用一个全局变量来跟踪 CTRL 键是否被按下，然后仅当 Ctrl 键被标记为按下时才观察“s”。var ctrldn = false;$("body").on('keydown', function(event) {&nbsp; if (event.which == 17){&nbsp; &nbsp; ctrldn = true;&nbsp; }});$("body").on('keyup', function(event) {&nbsp; if (event.which == 17){&nbsp; &nbsp; ctrldn = false;&nbsp; }});$("body").on('keydown', function(event) {&nbsp; if (ctrldn && event.which == 83){&nbsp; &nbsp; $('#mdl, #olay').show();&nbsp; &nbsp; return false;&nbsp; }});$('#mdl_closeX').click(function(){&nbsp; $('#mdl, #olay').hide();});$('input').focus(function(){&nbsp; ctrldn = false;&nbsp; $('body').off('keyup'); //the "s" will only work once});$('input').blur(function(){&nbsp; &nbsp; $("body").on('keyup', function(event) {&nbsp; &nbsp; &nbsp; &nbsp; if (ctrldn && event.which == 83) {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; $('#mdl').show();&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; $('body').off('keyup'); //the "s" will only work once&nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; });});#olay{&nbsp; position: fixed;&nbsp; top: 0;&nbsp; left: 0;&nbsp; width: 100vw;&nbsp; height: 100vh;&nbsp; background:black;&nbsp; opacity: 0.6;&nbsp; z-index:9998;&nbsp; display:none;}#mdl {&nbsp; position: fixed;&nbsp; top: 10%;&nbsp; left: 25%;&nbsp; background: wheat;&nbsp; z-index:9999;&nbsp; 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">&nbsp; <div id="mdl_closeX"> X </div>&nbsp; <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>&nbsp; &nbsp; 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)&nbsp; &nbsp; <input type="text" /></div>更新：我还稍微调整了第三个演示，向您展示如何将其转换为真正的模态——因此不需要 jQueryUI 或任何其他预制模态。你可以看看它们是如何在引擎盖下工作的。基本上，您需要一个覆盖（只是一个覆盖整个屏幕的 div），其 z-index 高于页面上除模态对话框之外的任何其他内容。然后你需要模态对话框结构（只是一个普通的 div，里面有东西），它被定位（使用 z-index）以坐在叠加层的顶部。是的，就是这么简单。

Answer 2

你试过这样的条件吗？if($('#search-modal').is(':visible')){&nbsp;//do other things}