JavaScript　使用するイベントが分かりません。

現在、Webサイト制作の練習でお問い合わせページを作成しています。

以下の実装をしたいのですが、３番の方法が分からず詰まってしまいました。
jsのkeyupイベントを使用するのかと考え試してみましたがうまくいきません。

どなたかお助けいただければ幸いです。よろしくお願いいたします。

１　入力欄にはデフォルトで「Name」「Email」など項目名が入っている
２　クリックすると項目名が一段上に上がる
３　内容を入力すると項目名は上がったままの状態でキープされる
（何も入力せず他の場所をクリックすると元の場所に戻る）

html
1<!doctype html>
2<html lang="ja">
3<head>
4<meta charset="UTF-8">
5<title>contact form</title>
6<link rel="stylesheet" href="styles.css">
7</head>
8<body>
9	<section class="get-in-touch">
10		<form class="contact-form row">
11			<div class="form-field col x-50">
12         		<input id="name" class="input-text js-input" type="text" required>
13         		<label class="label" for="name">Name</label>
14			</div>
15      		<div class="form-field col x-50">
16         		<input id="telephone" class="input-text js-input" type="tel" required>
17         		<label class="label" for="email">TELEPHONE</label>
18      		</div>
19      		<div class="form-field col x-100">
20        		 <input id="email" class="input-text js-input" type="email" required>
21        		 <label class="label" for="email">E-mail</label>
22      		</div>
23			<textarea name="message" id="" cols="30" rows="10" placeholder="メッセージを記入してください。"></textarea>
24      		<div class="form-field col x-100 align-center">
25         		<input class="submit-btn" type="submit" value="Submit">
26      		</div>
27   		</form>
28</body>
29</html>

css
1@charset "UTF-8";
2
3.row {
4  margin: -20px 0;
5}
6
7.row:after {
8  content: "";
9  display: table;
10  clear: both;
11}
12
13.row .col {
14  padding: 0 20px;
15  float: left;
16  box-sizing: border-box;
17}
18
19.row .col.x-50 {
20  width: 50%;
21}
22
23.row .col.x-100 {
24  width: 100%;
25}
26
27.content-wrapper {
28  min-height: 100%;
29  position: relative;
30}
31
32.get-in-touch {
33  max-width: 650px;
34  margin: 0 auto;
35  position: relative;
36  top: 50%;
37  text-align: center;
38  text-transform: uppercase;
39  letter-spacing: 3px;
40  font-size: 36px;
41  line-height: 48px;
42  padding-bottom: 48px;
43}
44
45.contact-form .form-field {
46  position: relative;
47  margin: 32px 0;
48}
49
50.contact-form .input-text {
51  display: block;
52  width: 100%;
53  height: 36px;
54  border-width: 0 0 2px 0;
55  border-color: #000;
56  font-size: 18px;
57  line-height: 26px;
58  font-weight: 400;
59}
60
61.contact-form .input-text:focus {
62  outline: none;
63}
64
65.contact-form .input-text:focus + .label,
66.contact-form .input-text.not-empty + .label {
67  transform: translateY(-24px);
68}
69
70.contact-form .label {
71  position: absolute;
72  left: 20px;
73  bottom: 11px;
74  font-size: 18px;
75  line-height: 26px;
76  font-weight: 400;
77  color: #888;
78  cursor: text;
79  transition: transform 0.2s ease-in-out;
80}
81
82.contact-form .submit-btn {
83  display: inline-block;
84  background-color: #000;
85  color: #fff;
86  text-transform: uppercase;
87  letter-spacing: 2px;
88  font-size: 16px;
89  line-height: 24px;
90  padding: 8px 16px;
91  border: none;
92  cursor: pointer;
93}
94
95textarea {
96  resize: none;
97  width: 90%;
98  height: 200px;
99  border-width: 2px;
100  border-color: #000;
101	padding: 17px 20px;
102	margin-top: 50px;
103}
104

m.ts10806

2020/08/16 23:15

2番目までできているのでしたら、そこまでのコードを提示してください。

m.ts10806

2020/08/16 23:16

あと試してみたkeyupのイベントのコードと、具体的になにが起きたか「うまくいかない」は誰にも何も伝えない表現です

行動規範の内容に同意します

回答2件

まず、聞きたいことがあるときはそれだけで現象が起こる最低限のコードにしてから聞いて頂けると助かります。見る人も回答する人にも要らない情報は載せない方がいいです。

そのままで動かない部分コードでは意味ないですけどね。

問題点

not-emptyなどというクラスは存在しないので、
.contact-form .input-text.not-empty + .labelが全く機能していないこと

恐らくテキスト内容が空でないときに対応するラベルを選択したいのだと思いますが、自分で作ってもいないクラスを指定して動かないと言うのはおかしいです。

対策

https://stackoverflow.com/questions/8639282/notempty-css-selector-is-not-working
あまりいい例ではないですが、これを参考にしました。

まず、テキスト内容が空かどうかを判定する方法ですが…CSSだと:emptyで出来そうですが、上で説明されてるとおり、DOM要素の中身のNodeがemptyという意味だそうなので、中身のテキストが空というだけではなく、属性も子要素も全て空ということなので使えません。

次に考えられるのが、INPUT要素なので、value属性を使って、[value=""]という判定。今回は空でないときに上に上げたいので、:not([value=""])という形で使います。ついでにvalueがないのでINPUT要素に初期値の""を指定してあげておきます。

意味合い的にはこれでいいのですが、ただ、value属性の値ってリアルタイムで更新されないようで、キーボードから打ち込もうが、その後フォーカスを移動しようが、初期値のままなのです。そこで、JavaScriptからキーボードからある文字を押して離した瞬間に上がるイベントをonkeyupで拾って、value属性を設定してしまいます。ここが副作用のありそうな良くない部分です。わざわざ要素のvalue属性に入れないでいる値を入れてしまっているので。(今回はなるべくCSSでやる方針かなと思い、あえてそうしています)

で、↑の内容をしたコードに落としたのが↓です。

html
1<html lang="ja">
2
3<head>
4    <style>
5        .contact-form {
6            position: relative;
7        }
8
9        .input-text:focus+.label,
10        .input-text:not([value=""])+.label {
11            transform: translateY(-24px);
12        }
13
14        .label {
15            position: absolute;
16            transition: transform 0.2s ease-in-out;
17        }
18    </style>
19</head>
20
21<body>
22    <form class="contact-form">
23        <div>
24            <input class="input-text" type="text" onkeyup="this.setAttribute('value', this.value);" value="" required>
25            <label class="label">Name</label>
26        </div>
27        <div>
28            <input class="submit-btn" type="submit" value="Submit">
29        </div>
30    </form>
31</body>
32
33</html>