入力した文字を拡大表示する超初級JSのdemoページ(あるいはplaceholder内のテキストをfocusで消すCSSテク)

Pocket
LINEで送る

JavaScriptの勉強を始めたとき、最初か2番目くらいにやってみる初級 of 初級のJavaScriptを使って、文字拡大させるデモページを作ってみました。
あまりにも初級なので、コードのサンプルは載せません。
単純に表示させる側のテキストにfont-size:2.5remを指定しただけ。

入力すると

大きなフォントサイズで表示されます。

なんのためにこんなデモページを作ったの?って言われそうですが、ディスクリプション等の文章チェックで、大きい文字で見た方が確認しやすいからという理由です!
初級過ぎて検索しても見つからなかったので(テキストエディタでやればいい気が今更ながらしてきましたが)。

デモページ

こっそり、textareaをfocusでplaceholder内の文字を消すCSSテクのメモも兼ねてます。

デフォルトのplaceholder内の文字が入力するまで文字が消えない仕様だと、人によって混乱するようなので(「ここの文字、どうやって消したらいいの?」と聞かれたことがある)、focusで消えてくれてた方がスッキリするのかなと思います。

textareaではなくテキストフォームに反映させたい場合は、textarea:placeholder-shownの部分を、input[type="text"]:placeholder-shownに置き換えてください。それ以外のベンダープレフィックスの方はただのinputに置き換えてください。

/* placeholder */
textarea:placeholder-shown {
 color: #bbb;
}
textarea::-webkit-input-placeholder {
 color: #bbb;
}
textarea::-moz-placeholder {
 color: #bbb;
 opacity: 1;
}
textarea:-ms-input-placeholder {
 color: #bbb;
}

/* placeholder focus */
textarea:focus::-webkit-input-placeholder { 
 color:transparent;
}
textarea:focus::-moz-placeholder { 
 color:transparent; 
}

Pocket
LINEで送る

back to top