課題【イベント操作】ーNo.06
課題内容
- ＜概要＞
- inputタグを２つ用意しましょう。
- １つ目のinputタグのtypeはpasswordで用意しましょう。
- ２つ目のinputタグのtypeはpasswordで用意しましょう。
- この２つのinputタグに対して、
- inputというタグ指定で要素を取得して、
- 以下の処理を行ってみましょう。
- ＜入力状態になった時＞
- 「XXが入力状態になりました」
- という文字列を、
- コンソールに表示しましょう。
- XXは「テキスト」または「パスワード」
- ＜入力状態が外れた時＞
- 「XXの入力状態が外れました」
- という文字列を、
- コンソールに表示しましょう。
- XXは「テキスト」または「パスワード」
出力結果
表示としては、
input(typeはtext）として、
というタグと、
input（typeはpassword）として、
このような、
２つの入力項目を準備しましょう。
この２つに関して、
以下の表示を行います。
input（typeはtext）のイベント操作
要素として、
こちらの要素に関して、
実際に入力できる状態になった時に、
コンソールに以下が表示されます。
テキストが入力状態になりました入力状態が解除された時に、
コンソールに以下が表示されます。
テキストの入力状態が外れましたinput（typeはpassword）のイベント操作
パスワードの入力項目の
この要素に関して、
こちらの要素に関して、
実際に入力できる状態になった時に、
コンソールに以下が表示されます。
パスワードが入力状態になりました入力状態が解除された時に、
コンソールに以下が表示されます。
パスワードの入力状態が外れましたポイント（イベント操作）
DOMのイベント操作に関しては、
- 対象のDOM操作の要素を取得する
- 要素のイベントの処理を設定する
を行うことで、
イベントを操作することができます。
このイベント操作の方法に関しては、
以下の記事を参考にしてください。
イベント操作（入力可能な要素が選択された時の操作）
イベント操作に関して、
「入力可能な要素が選択された時の操作」
に関しては、
イベント操作の中でも、
「focus」
を使って操作を行います。
このイベント操作の方法に関しては、
以下の記事を参考にしてください。
イベント操作（入力可能な要素が選択状態が解除された時の操作）
イベント操作に関して、
「入力可能な要素が選択状態が解除された時の操作」
に関しては、
イベント操作の中でも、
「blur」
を使って操作を行います。
このイベント操作の方法に関しては、
以下の記事を参考にしてください。
【イベント操作】入力可能な要素が選択状態が解除された時の操作を行う時の操作を行う
答え
HTML
<html>
<head>
<meta charset="UTF-8">
</head>
<body>
<input type="text" value="これは入力項目です">
<input type="password">
</body>
<script type="text/javascript" src="sample.js"></script>
</html>javaScript
// DOMを取得する（type：text）
let sampleText = document.querySelector('input[type="text"]');
// DOMを取得する（type：password）
let samplePassword = document.querySelector('input[type="password"]');
// イベント操作
sampleText.addEventListener('focus', event => {
// コンソールに表示
console.log('テキストが入力状態になりました');
});
// イベント操作
sampleText.addEventListener('blur', event => {
// コンソールに表示
console.log('テキストの入力状態が外れました');
});
// イベント操作
samplePassword.addEventListener('focus', event => {
// コンソールに表示
console.log('パスワードが入力状態になりました');
});
// イベント操作
samplePassword.addEventListener('blur', event => {
// コンソールに表示
console.log('パスワードの入力状態が外れました');
});初心者向けピックアップ
