Question

我有一个动画搜索栏，用于在用户点击它时隐藏。但是，这会导致直接单击它旁边的提交按钮被忽略。我怎么能绕过这个？

HTML，

    <form role="search" id="searchform" method="get" action="/">
      <i class="icon icon-search"></i>
      <a id="search-toggle" href="#"></a>
      <input type="submit" value="">
      <input id="search" type="text" name="s" value="">
    </form>

CSS（SCSS），

form {
            margin: 0;
            input {
                float: right;
            }
            input[type="text"] {
                height: 3rem;
                margin: 5px 0 0 0;
                padding: 0;
                width: 0;
                @include transition(all, .2s, ease-in-out);
                &.active {
                    width: 80%;
                    padding: .5rem 1rem;
                }
            }
            input[type="submit"] {
                width: 4rem;
                background-color: transparent;
            }
        }
    a, i {
        position: absolute;
        line-height: 4rem;
        width: 4rem;
        height: 4rem;
        text-align: center;
        top: 0;
        right: 0;
    }
    i {
        pointer-events: none;
        color: $light-grey;
        font-size: 1.6rem;
        z-index: 30;
        padding: 3px 0 0 0;
        @include transition(color, .2s, ease);
    }

JS，

  $('#search').focusout(function() {
    $(this).removeClass('active');
  });

还尝试使用blur（）而不是focusout（），结果相同。

编辑：添加了一些额外的代码。我有一个图标和隐藏链接按钮覆盖提交按钮，以防止它立即提交 - 我想动画并首先显示搜索框。在显示该框并且用户输入某些内容之后，这就是我遇到提交事件时遇到问题。现在它需要两次点击，一次先关闭框，然后再触发一次按钮。

Answer 1

我知道这是一个老问题，但碰巧我有同样的问题并以其他方式解决了，所以也许下面的代码可以方便别人：

for (int j = 0; j < k; j++)
  inputFile >> tab[j];

¿为什么会这样？

$('#text_input_id').blur(function(event){ //event.relatedTarget gets the object that triggered the blur event(or "focus // out" event), in this case if it is a submit input, ignore the blur event. if($(event.relatedTarget).prop('type') === 'submit'){ event.preventDefault(); } else { //Do whatever you want when focusing out. For instance: $('#search').css('display', 'none'); } });或focusout事件（请参阅差异here）会阻止提交按钮正常工作，因为有些事情会覆盖blur事件，导致点击两次的奇怪行为提交。这里的诀窍是使用submit，它获取触发event.relatedTarget事件的对象。在这种情况下，如果是任何提交按钮blur），请致电<input type="submit" value="Search">以解决问题。

Answer 2

这里有一些问题，也许你可以澄清你的推理。

您是否有理由切换类active而不是使用:focus伪类进行样式设置？这仍然允许键盘使用，你可以绑定一些东西到这个切换链接，如下所示：

$('#search-toggle').click(function(){
    $('#search').focus();
});

https://developer.mozilla.org/en-US/docs/Web/CSS/:focus

如果你不希望它缩小，你可以在通过css聚焦该表单中的任何内容时应用该样式（请注意，我建议使用搜索输入类型而不是文本）：

form *:focus ~ input[type="search"] {
     width: 80%;
     padding: .5rem 1rem;
}

Answer 3

如果您想要阻止在用户未在搜索框中输入任何内容时按下提交按钮，您可以默认禁用它，然后在用户在搜索输入中输入内容后启用它（这将允许您不用您的锚标记掩盖提交按钮）：

提交按钮HTML：

<input type="submit" value="" disabled>

jQuery仅在搜索框中的keyup事件后启用提交按钮：

$(document).ready(function () {

    $("#search").on("keyup", function () {
        if ($(this).val() != "") $(":submit").prop("disabled", false);
    });

});

聚焦功能否定点击提交

3 个答案:

¿为什么会这样？