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