inputタグにおいて、placeholderの字をフォーカス後も消えないようにしたいです。

前提・実現したいこと

inputタグにあらかじめplaceholderで文字が入っており、その字を入力してもらうプログラムです。
placeholderの字がフォーカス後も消えないようにしたいです。
placeholderの字が消えてしまう場合、他に代替案があるなら教えて下さい。（inputタグにあらかじめ文字が入っており、その字を入力すると、入力した字だけ色が変わる）
よろしくお願いします。

該当のソースコード

html
1<!DOCTYPE html>
2<html>
3<head><meta charset="UTF-8">
4  
5  <title>2</title>
6  <link rel="stylesheet" href="2.css">
7  <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
8  <style>
9      #name{font-size:20px;}
10  </style>
11</head>
12<body>
13    <input type="text" id="name" name="name" placeholder="teratail">
14  <script type="text/javascript" src="2.js" charset="UTF-8"></script>
15</body>
16</html>

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

回答1件

ベストアンサー

Materiarize.cssのような動きは如何でしょう。
厳密にはplaceholderではなくlabelですが、placeholdeをそのまま使うとおそらく難しいんじゃないかなあと。

投稿2020/06/01 12:55

m.ts10806

総合スコア80875

Gakut

2020/06/01 12:58

やはり無理ですか。。。ありがとうございます。

m.ts10806

2020/06/01 20:28

placehoderの役割はそういうものです。ずっとそのまま出ていたら入力しづらくてかないません。ヘルプ文言のように下とかに出しておくしかないでしょうね。で、リンク先の挙動は見られましたか？何も参考になりませんか？アドバイスを得た上でどうするつもりなのか教えてください。でないと解決に向かいません

Gakut

2020/06/03 02:22

コメント、ありがとうございます。今回、タイピングツールを開発するつもりでして、フォームに書いてある文をそのまま表示したかったのです。 https://stackoverflow.com/questions/26324252/html-keep-placeholder-when-user-types のサイトに解決策がありました。 cssにて　::after　を使ったところうまくいきました。

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