質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

Q&A

解決済

4回答

1196閲覧

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

ema-material

総合スコア29

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

0グッド

0クリップ

投稿2020/03/03 10:04

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

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

<textarea>内では効かないです。![イメージ説明](e5728e3b0bccbc92e8907cc3485f3e99.png) フォーム内に入力し始めたらプレースホルダーに表記してあるテキストが消えるので 入力欄上部にフローティングラベルを実装しようとしています。 どうぞよろしくお願いいたします。 ```html <form id="form" class="topBefore field" action="#" method="post"> <label class="field__label01" for="name">Your&nbsp;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});

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答4

0

「floating label only css」で検索すると、CSSオンリーのコードが見つかりましたよ。

投稿2020/03/03 22:36

AkitoshiManabe

総合スコア5432

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

ema-material

2020/03/04 00:51

ありがとうございます。併せて参考にさせていただきます。
guest

0

自己解決

解決しました。
クラス名の付け忘れでした。
見ていただきましてありがとうございました。

投稿2020/03/04 07:43

ema-material

総合スコア29

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

kei344

2020/03/04 07:55

回答欄は編集できます。特に違いの無い回答を連投するのはやめましょう。
guest

0

ネット接続の不備で、回答が重複しました。後々削除を依頼します。

投稿2020/03/04 07:31

編集2020/03/04 09:22
ema-material

総合スコア29

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

0

ネット接続の不備で、回答が重複しました。後々削除を依頼します。

投稿2020/03/04 07:20

編集2020/03/04 09:23
ema-material

総合スコア29

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問