切换焦点单击按钮

问题描述

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

因此，简单来说，我想在按钮上发生onclick事件时将焦点切换到文本输入框。

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

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

在脚本标记内：

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

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

请帮我解决一下这个。

谢谢。

尝试这个：

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

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

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

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

用法：

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

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

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

});

由于您没有提供任何HTML，因此您需要根据需要更改代码。

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