JavaScriptでのテキストフィールドのフォーカス

ここにインプット（入力フィールド）があるとします。このインプットをクリックすると、中に点滅するカーソル（棒線）が現れ、テキストを入力できるようになります。

この状態を、インプットが入力フォーカスを持っていると言います。実際には、キーボードでテキストを入力し始めると、そのテキストは現在フォーカスを持っているインプットに入力されます。その後、インプットの外側をクリックすると、そのインプットはフォーカスを失い、テキストを入力できなくなります。

インプットがフォーカスを取得または失う瞬間を捕捉するために、JavaScriptには特別なイベントが用意されています。イベントfocusはインプットがフォーカスを取得したことを捉え、イベントblurはフォーカスを失ったことを捉えます。実際に試してみましょう。次のようなインプットがあるとします：

<input id="elem" value="text">

このインプットへの参照を変数に取得します：

let elem = document.querySelector('#elem');

次に、フォーカスを取得したときにコンソールに現在のインプットのテキストを表示するようにしましょう：

elem.addEventListener('focus', function() {
	console.log(elem.value);
});

インプットが与えられます。フォーカスを取得したときに数字1を入力し、フォーカスを失ったときに数字2を入力してください。

インプットが与えられます。このインプットに数字を入力します。フォーカスを失ったときに、その数字の2乗を画面に出力してください。

最初から何らかのテキストが入っているインプットが与えられます。インプットがフォーカスを取得したときに、そのインプットの中身をクリアしてください。