2018年10月20日

イベント: change, input, cut, copy, paste

データ更新に伴うさまざまなイベントについて説明しましょう。

イベント: change

change イベントは要素の変更が終わったときにトリガされます。

テキストインプットの場合、それはフォーカスを失った時にイベントが発生することを意味します。

例えば、以下のテキストフィールドでタイプしている間 – イベントは起こりません。しかし、例えばボタンのクリックなど、他のなにかにフォーカスを移動させたとき、 – change イベントが発生します:

<input type="text" onchange="alert(this.value)">
<input type="button" value="Button">

他の要素 select, input type=checkbox/radio の場合、選択が変わった直後にトリガされます。

イベント: input

input イベント値が変更されるたびにトリガされます。

例:

<input type="text" id="input"> oninput: <span id="result"></span>
<script>
  input.oninput = function() {
    result.innerHTML = input.value;
  };
</script>

<input> 上でのすべての変更を処理したい場合、このイベントがベストな選択になります。

キーボードイベントとは違い、キーボード操作を伴わないものであっても(マウスを使用してペーストするか、テキストを指示するために音声認識を使用する)、あらゆる値の変更にも対応します。

oninput で何かを防ぐことはできません

input イベントは値が変更された後に起こります。

そのため、ここでは event.preventDefault() は使えません。おそすぎるため、影響を与えません。

イベント: cut, copy, paste

これらのイベントは値の カット/コピー/ペースト 時に起こります。

これらは ClipboardEvent クラスに属しており、コピー/ペーストされるデータへのアクセスを提供します。

event.preventDefault()を使ってアクションを中止することもできます。

例えば、下のコードはこのようなすべてのイベントを防ぎ、我々が何をカット/コピー/ペーストしようとしているかを表示します。:

<input type="text" id="input">
<script>
  input.oncut = input.oncopy = input.onpaste = function(event) {
    alert(event.type + ' - ' + event.clipboardData.getData('text/plain'));
    return false;
  };
</script>

技術的には、なんでもコピー/ペーストすることが出来ます。例えば、OSのファイルマネージャでコピーや保管ができ、それを貼り付けることができます。

仕様に、さまざまなデータ型で動作し、クリップボードへの読み書きを行うためのメソッドの一覧があります。

しかし、クリップボードは OS レベルの “グローバル” なものです。ほとんどのブラウザでは、安全のために特定のユーザ操作の範囲でのみクリップボードへの読み書きをすることができます。また、Firefoxを除いてすべてのブラウザで “カスタム” のクリップボードイベントを作成することは禁じられています。

サマリ

データ変更のイベント:

イベント 説明 補足
change 値が変更されたとき. テキストインプットの場合はフォーカスが外れたときに発生します.
input テキスト入力のすべての変更. change とは違い即座に発生します.
cut/copy/paste カット/コピー/ペースト操作. 操作は防ぐ事が可能です。event.clipbordData プロパティでクリップボードへの読み書きのアクセスが可能です.

タスク

重要性: 5

銀行預金の合計とパーセンテージが入力でき、指定期間後にどれだけの金額になるか計算するインタフェースを作成してください。

これがデモです:

どの入力の変更も即座に処理される必要があります。

数式は次の通りです:

// initial: 初期の合計金額
// interest: e.g. 0.05 は年間 5% を意味します
// years: 待つ年月
let result = Math.round(initial * (1 + interest * years));

タスクのためのサンドボックスを開く

チュートリアルマップ