【JavaScript】input（ブラウザイベント） - 値が変更した時のイベント

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

input

inputは値が変更した時のイベントです。
input要素やtext要素で値を入力するごとにイベントが発生します。

サンプル

HTML属性

oninput属性を設定します。

Sample

<input id="input" oninput="valueRender(event);">
<p id="message"></p>

<script type="text/javascript">
    
    function valueRender(event) {
        let message = document.getElementById('message');
        message.textContent = event.target.value;
    }
    
</script>

プレビュー

DOMメソッド

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

Sample

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

<script type="text/javascript">
    
    function valueRender(event) {
        let message = document.getElementById('message');
        message.textContent = event.target.value;
    }
    
    let input = document.getElementById('input');
    
    input.addEventListener('input', valueRender);
    
</script>

プレビュー