切换焦点单击按钮

时间:2015-07-16 17:06:33

标签: javascript jquery html

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

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

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

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

在脚本标记内:

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

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

请帮助我。

谢谢。

5 个答案:

答案 0 :(得分:4)

您可以使用此代码段(在Chrome上测试):

&#13;
&#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;
&#13;
&#13;

答案 1 :(得分:1)

试试这个:

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

答案 2 :(得分:1)

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

您可以将其添加到$.onready

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

用法:

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

答案 3 :(得分:0)

您可以将代码更新为以下

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

});

答案 4 :(得分:0)

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

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