Question

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

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

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

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

在脚本标记内：

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

这会使焦点集中在输入文本框上，但我想在再次单击该按钮时删除焦点。

请帮助我。

谢谢。

Answer 1

您可以使用此代码段（在Chrome上测试）：

＆＃13;

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

＆＃13;

<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>

＆＃13;

Answer 2

试试这个：

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

Answer 3

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

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

的顶部

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

用法：

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

Answer 4

您可以将代码更新为以下

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

});

Answer 5

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

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

切换焦点单击按钮

5 个答案: