jQuery 焦点和模糊方法

Question

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

// 搜索按钮

  $("#mob-search-btn").click(function() {
  $(".search-container input").focus();
  });

我在 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();
});