javascriptで要素のフォーカスがどのように機能するかを理解します。

Question

要素フォーカスの仕組みを理解しようとしています。

私の質問は： -

1. Javascriptの焦点は、いくつかの制限がありますか？私はそれがウェブサイトのコードとデバッグコンソールから実行されるとき、同じ権限を持っているのですか？

2. また、フォーカスはユーザーの操作によって異なりますか？私はそれがこのように動作しますなぜ私は理解できないコード例を持っているので： - コードはそれを実行し始めるとJSFiddle

   で

$('document').ready(function() { 
 

 
    $('#username').focus(); 
 

 
    $("#username").focus(function() { 
 
    $('.placeholder').hide(); 
 
    }); 
 

 
    $('#ss').click(function() { 
 
    $('#username').focus(); 
 
    }); 
 

 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script> 
 

 
<div class="placeholder_input"> 
 
    <input type="text" id="username" maxlength="100" /> 
 
    <div class="placeholder_container"> 
 
    <div class="placeholder">username</div> 
 

 
    <div id='ss'> damc</div> 
 
    </div> 
 
</div>

例は、入力フィールドを集中しなければなりませんテキストを隠すことができますが、これを行わないと理由を理解できません。しかし、テキストをクリックすると、入力フィールドに注目し、テキストを非表示にします。なぜそれが最初に隠れることができないのですか？それは何らかの種類の制限ですか？

Answer 1

イベントリスナーをバインドする前に、要素に注目しています。順序を変更し、予定通り、それは動作します：あなたがイベントリスナーを添付する前に

$('document').ready(function() { 
 

 
    $("#username").focus(function() { 
 
    $('.placeholder').hide(); 
 
    }); 
 

 
    $('#ss').click(function() { 
 
    $('#username').focus(); 
 
    }); 
 
    
 
    $('#username').focus(); // focus here after your events are bound 
 
    
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script> 
 

 
<div class="placeholder_input"> 
 
    <input type="text" id="username" maxlength="100" /> 
 
    <div class="placeholder_container"> 
 
    <div class="placeholder">username</div> 
 

 
    <div id='ss'> damc</div> 
 
    </div> 
 
</div>