【JavaScript】focus（ブラウザイベント） - フォーカスが当たった時のイベント

JavaScriptのfocus（ブラウザイベント）を解説します。

focus

focusは要素にフォーカスが当たったときのイベントです。

サンプル

HTML属性

onfocus属性を設定します。

Sample

<input id="input" onfocus="greeting();">
<p id="message"></p>

<script type="text/javascript">
    
    function greeting() {
        let message = document.getElementById('message');
        message.textContent = 'Hello World!';
    }
    
</script>

プレビュー

DOMメソッド

イベント種別にfocusを設定します。

Sample

<input id="input">
<p id="message"></p>

<script type="text/javascript">
    
    function greeting() {
        let message = document.getElementById('message');
        message.textContent = 'Hello World!';
    }
    
    let input = document.getElementById('input');
    
    input.addEventListener('focus', greeting);
    
</script>

プレビュー