切换焦点单击按钮

Question

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

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

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

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

在脚本标记内:

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

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

请帮我解决一下这个.

谢谢.

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>