时间戳

首页 > 解决方案 > jquery焦点和模糊方法

jquery - jquery焦点和模糊方法

问题描述

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

// 搜索按钮

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

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

希望能得到各位大佬的帮助。

标签： jquery

解决方案

在决定做什么之前，您需要检查指定的输入是否具有焦点：

解决方案 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();阻止按钮单击（提交表单或其他）。

推荐阅读