点击按钮切换焦点

Question

我有一个表单在面板里。当点击按钮时，面板会打开和关闭。当面板打开时[即通过单击按钮]，我想聚焦于面板内第一个输入文本框。当我关闭面板[即再次单击同一个按钮]时，我想取消对该输入框的焦点。

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

我为输入文本框设置了一个id，并进行了以下操作：

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

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

这会使输入文本框获得焦点，但是当我再次点击按钮时，我想移除焦点。

请帮我解决这个问题。

谢谢。

- ShellZero

Answer 1

您可以使用以下代码片段（已在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>

- A. Wolff

---

感谢您提供如此棒的代码片段。 :) - ShellZero

Answer 2

我知道这是一个很晚的答案，但以下是一种添加新的jQuery方法的解决方案。您可以将其添加到 $.onready 的顶部：

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

使用方法：

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

- user5147563

---

很棒的代码片段 :) - ShellZero

Answer 3

试试这个：

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

- asmockler

---

单击按钮会在所有情况下移除输入焦点。 - A. Wolff

Answer 4

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

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

});

- Nikhil Aggarwal

---

不处理这种情况：您单击一次，然后将焦点设置在其他元素上，然后重新单击按钮，例如：http://jsfiddle.net/ksqjnksy/ - A. Wolff

Answer 5

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

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

- Varun

---

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