teratail header banner
teratail header banner
質問するログイン新規登録

回答編集履歴

1

コードを追加

2018/04/07 04:53

投稿

defghi1977
defghi1977

スコア4756

answer CHANGED
@@ -8,4 +8,32 @@
8
8
  }
9
9
  ```
10
10
  NOTE:
11
- と解釈しましたが如何でしょうか?
11
+ と解釈しましたが如何でしょうか?
12
+
13
+ ---
14
+
15
+ `input`要素の入力状態によってスタイルを切り替えたいとのことでしたので, `input`要素の入力内容を監視し, その内容によってクラスを付け替えるようにしてみました.
16
+
17
+ NOTE:
18
+ 本来このような動作を単純化するためにCSSが存在するのですが, うまく要件に合致する擬似クラスを見つけることが出来ませんでした.
19
+
20
+ ```HTML
21
+ <input id="address"/>
22
+ ```
23
+ ```CSS
24
+ input{
25
+ background-color: white;
26
+ }
27
+ input.inputted{
28
+ background-color: yellow;
29
+ }
30
+ ```
31
+ ```JavaScript
32
+ "use strict";
33
+ {
34
+ (function observe(){
35
+ address.classList[address.value == "" ? "remove" : "add"]("inputted");
36
+ requestAnimationFrame(observe);
37
+ })();
38
+ }
39
+ ```