在单击按钮时切换焦点答案

【问题标题】：Toggle focus onclick of a button在单击按钮时切换焦点
【发布时间】：2025-12-13 21:00:01
【问题描述】：

我在面板中有一个表单。单击按钮时面板会打开和关闭。当面板打开时[即单击按钮]，我想关注面板内表单中的第一个输入文本框。当我关闭面板[即再次单击同一个按钮]时，我想从该输入框中释放焦点。

所以，简单来说，我想在按钮上发生 onclick 事件时切换文本输入框的焦点。

我给输入文本框一个 id 并做了以下操作：

<input type="text" id="code" placeholder="enter code">

脚本标签内：

$('.button-element').click(function(){ $('#code').focus();});

这使得焦点在输入文本框上，但我想在再次单击按钮时移除焦点。

请帮帮我。

谢谢。

【问题讨论】：

标签： javascript jquery html

【解决方案1】：

您可以使用这个 sn-p（在 chrome 上测试）：

var $code = $('#code');
$('.button-element').on('mousedown', function () {
    $(this).data('inputFocused', $code.is(":focus"));
}).click(function () {
    if ($(this).data('inputFocused')) {
        $code.blur();
    } else {
        $code.focus();
    }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<input type="text" id="code" placeholder="enter code">
<button class="button-element">btn</button>

【讨论】：

感谢出色的 sn-p。 :)

【解决方案2】：

我知道这是一个很晚的答案，但这是一个添加新 jQuery 方法的解决方案。

您可以将其添加到您的$.onready 顶部：

jQuery.fn.toggleFocus = function(){
  if (this.is(":focus")) {
    this.blur();
  } else {
    this.focus();
  }
}

用法：

$(".button-element").toggleFocus()

【讨论】：

伟大的 sn-p :)

【解决方案3】：

试试这个：

var code = $('#code');
$('.button-element').click(function() {
    if(code.is(":focus")) {
        code.blur();
    } else {
        code.focus();
    }
});

【讨论】：

在所有情况下单击按钮都会移除输入焦点

【解决方案4】：

您可以将您的代码更新为以下内容

var focusInput = true;
$('.button-element').click(function(){ 
    if(focusInput) {
       $('#code').focus();
    } else {
       $('#code').blur();
    }
    focusInput = !focusInput;

});

【讨论】：

不处理单击一次然后将焦点设置在其他元素上然后重新单击按钮的情况，例如：jsfiddle.net/ksqjnksy

【解决方案5】：

由于您没有给出任何HTML，您需要根据需要更改代码。

  $('.button-element').click(function()
  {  
    if($("#ID-of-panel").is(':visible'))
        $('#code').blur();
    else
         $('#code').focus();
   });

【讨论】：

@A.Wolff 我理解它是因为单击按钮会切换给定的面板。假设它是这样的，我已经使用它了。