javascript - クリックによってトリガーされないフォーカス

Question

入力をフォーカスしているときにアクションをトリガーする方法はありますが、フォーカスイベントはクリックからではありませんか?

$('#input').focus(function(){
  if(not come from click)
  {
    alert('Holla!');
  }
});

Answer 1

キーボードからの「フォーカス」イベントとマウスからの「フォーカス」イベントを見分けるために、マウス イベントを追跡できます。

まず、入力をクリックするか Tab キーを押したときに発生する一連のイベントを理解するには、次の jsfiddle を参照してください: http://jsfiddle.net/orlenko/fyFkk/

その中に、mousedown、mouseup、click、focus、および blur イベントを記録します。\

<input type="text" id="zero"/>
<input type="text" id="one"/>

JavaScript:

$(function() {
    var one = $('#one');

    one.mousedown(function() {
       console.log('mousedown');
    });

    one.mouseup(function() {
       console.log('mouseup');
    });

    one.click(function() {
       console.log('click');
    });

    one.focus(function() {
       console.log('focus');
    });

    one.blur(function() {
       console.log('blur');
    });

});

入力をクリックしてから別のコントロールをクリックすると、次のようになります。

• マウスダウン
• 集中
• マウスアップ
• クリック
• ぼかし

しかし、入力にタブで出入りすると、コンソールに次のように表示されます。

• 集中
• ぼかし

したがって、mousedown イベントと blur イベントを追跡すると、キーボード ベースのフォーカスとマウス ベースのフォーカスを区別できます。例えば：

$(function() {
    var one = $('#one');

    one.mousedown(function() {
       console.log('mousedown');
        $(this).data('mousedown', true);
    });

    one.mouseup(function() {
       console.log('mouseup');
    });

    one.click(function() {
       console.log('click');
    });

    one.focus(function() {
        if ($(this).data('mousedown')) {
            console.log('You clicked it!');
        } else {
            console.log('You tabbed it!');
        }
    });

    one.blur(function() {
       console.log('blur');
       $(this).data('mousedown', false);
    });

});

この例のフィドル: http://jsfiddle.net/orlenko/cwRAw/

Answer 2

使用するkeyup

 $('#input').keyup(function(){
    alert('Called only when the focus is on element through keypress');
 });

Answer 3

function ren(){

    alert('Holla!');

}
$('input').focus(ren);
$('input').mousedown(function(){      
$('input').off('focus',ren);  
});
$('input').mouseup(function(){      
$('input').on('focus',ren);  
});

クリック時にフォーカス機能を削除する代わりに、フォーカス機能をチェックインしないでください

デモンストレーション