Question

当我单击按钮时，搜索输入处于焦点位置，但是我希望焦点在第二次单击时消失。这是我的代码：

//搜索按钮

0.00001

我在w3学校找到了这个，但是我只需要一个按钮就可以完成这项工作。 https://www.w3schools.com/jquery/tryit.asp?filename=tryjquery_event_focus_blur_trigger

希望从大家那里得到帮助。

Answer 1

在确定要执行的操作之前，您需要检查指定的输入是否具有焦点：

解决方案1（https://jsfiddle.net/azbnmuL9/3/）：

( function($) {
  $('.search-container input').focus( function() {
    $(this).addClass('has-focus');
  });

  $( '#mob-search-btn' ).click( function() {
    var el = $( '.search-container input' );

    if(el.hasClass('has-focus')) {
      el.blur();
      el.removeClass('has-focus');
    } else {
      el.focus();
    }
  } );
} )(jQuery);

缺点：如果您手动将焦点更改为其他内容，则不会有任何好处。

解决方案2（https://jsfiddle.net/azbnmuL9/）：

( function($) {
  $( '#mob-search-btn' ).mousedown( function(e) {
    e.preventDefault();

    var el = $( '.search-container input' );

    if(el.is(':focus')) {
      el.blur();
    } else {
      el.focus();
    }
  } );
} )(jQuery);

缺点：e.preventDefault();防止单击按钮（提交表单或其他内容）。

Answer 2

您需要在每次点击时切换输入焦点。因此需要一个条件来检查输入是否已经集中。

var checkfocus = false;
$("#mob-search-btn").on('click', function()
{
    if(checkfocus){
        checkfocus = false;
        $("#mob-search-btn").blur();
    }
    else{
        checkfocus = true;
        $("#mob-search-btn").focus();
    }
});

Answer 3

如果我理解您的意思，则您需要一个相同的按钮，该按钮侧重于第一次单击，而散焦于第二次单击，依此类推。为此，只需存储一个控制变量：

var focused = false;
$("#mob-search-btn").click(function()
{
  if (focused == true)
  {
    $(".search-container input").blur();
    focused = false;
  }
  else
  {
    $(".search-container input").focus();
    focused = true;
  }
});

Answer 4

使用标记来结束此用法，在这种情况下，焦点事件将不起作用

let isFocus=false;

 $("#mob-search-btn").click(function() {

     if(isFocus){
      $(".search-container").blur();
      isFocus=false;
      }
      else{
      $(".search-container").focus();
      isFocus=true;
      }

  });

如果必要，您还可以使用双击事件来阻止这种情况

Answer 5

为了在输入模糊时进行更改，您需要创建第二个单击处理程序，例如：

// Replace .my-button with your class or ID.
$(".my-button").click(function() {
    $(".search-container input").blur();
});

顺便说一句，现在使用.on而不是.click几乎是标准惯例：

$(".my-button").on("click", function() {
    $(".search-container input").blur();
});

jQuery焦点和模糊方法

5 个答案: