フローティングラベルを実装したい。

js初心者です。ご教示いただけますと助かります。

下記画像の通り、
フローティングラベルが<input>内では有効ですが

<textarea>内では効かないです。![イメージ説明](e5728e3b0bccbc92e8907cc3485f3e99.png) フォーム内に入力し始めたらプレースホルダーに表記してあるテキストが消えるので入力欄上部にフローティングラベルを実装しようとしています。どうぞよろしくお願いいたします。 ```html <form id="form" class="topBefore field" action="#" method="post"> <label class="field__label01" for="name">Your Name</label> <input id="name" type="text" placeholder="Your Name" name="name" class="field__input01 one-column-form__input--text nameInput"> <label class="field__label02" for="email">E-mail</label> <input id="email" type="email" placeholder="E-mail" pattern="[a-z0-9._%+-]+@[a-z0-9.-]+.[a-z]{2,4}$" style="ime-mode:disabled" name="email" class="field__input02 one-column-form__input--text emailInput"> <label class="field__label03" for="message">Message</label> <textarea id="message" type="text" placeholder="Message" name="message" class="field__input one-column-form__input--text messageInput"></textarea> <input id="submit" type="submit" value="Send Mail"> </form> ```

#contents1 #form {
  width: 1000px;
	position: relative;
}

input {
  font-family:"Josefin Sans";
  font-size: 16px;
  width: 1000px;
  height: 54px;
  padding: 0px 15px 0px 15px;
  background: transparent;
  color: #fff;
  border: solid 1px #fff;
  border-bottom: none;
  transition: all 0.3s ease-in-out;
  -webkit-transition: all 0.3s ease-in-out;
  -moz-transition: all 0.3s ease-in-out;
  -ms-transition: all 0.3s ease-in-out;
	box-sizing: border-box;
	font-weight: lighter;
}

input:hover {
  background-color:rgba(19,19,19,0.5);
  
}
#email{
  font-size:20px;
}
textarea {
  width: 1000px;
  max-width: 1000px;
  height: 110px;
  max-height: 110px;
  padding: 15px;
  background: transparent;
  color: #fff;
  font-size: 18px;
  border: solid 1px #fff;
  transition: all 0.3s ease-in-out;
  -webkit-transition: all 0.3s ease-in-out;
  -moz-transition: all 0.3s ease-in-out;
  -ms-transition: all 0.3s ease-in-out;
	box-sizing: border-box;
  display: block; 

}

textarea:hover {
  background-color:rgba(19,19,19,0.5);
  color: #fff;
}

#submit {
  width: 1000px;
  margin: 0px 0px 0px 0px;
	
  letter-spacing: .15em;
font-size: 20px;
  color: #fff;
  cursor: pointer;
  border: solid 1px #fff;
  border-top: none;
  background-image: url(../images/mail_row.svg);
  background-repeat: no-repeat;
  background-position:560px 11px;
  background-size:24px 24px;
  transition: all .5s ease;
	box-sizing: border-box;
}

#submit:hover {
  color: #fff;
  background-image:url(../images/mail_row.svg);
  background-repeat: no-repeat;
  background-position: 590px -24px;
  background-size:24px 24px;
  background-color:rgba(252,255,158,0.5);
  
}

javascript
1	$('.field__input01').on('input', function() {
2  var $field = $(this).closest('.field');
3  if (this.value) {
4    $field.addClass('field--not-empty01');
5  } else {
6    $field.removeClass('field--not-empty01');
7  }
8});
9	
10		$('.field__input02').on('input', function() {
11  var $field = $(this).closest('.field');
12  if (this.value) {
13    $field.addClass('field--not-empty02');
14  } else {
15    $field.removeClass('field--not-empty02');
16  }
17});
18  		$('.field__input03').on('input', function() {
19  var $field = $(this).closest('.field');
20  if (this.value) {
21    $field.addClass('field--not-empty03');
22  } else {
23    $field.removeClass('field--not-empty03');
24  }
25});