プレースホルダー

3787 ワード
webdev css javascript テキストリンク
The :placeholder-shown 疑似クラスは<input> or <textarea> プレースホルダテキストを表示する要素.
この規則を使えば、JavaScriptの助けを必要とするこのタイプのスタイリングを行うことができます.

<input name="food" placeholder=" " />
<label for="food">Favorite food</label>

const input = document.querySelector('input');

input.addEventListener('focus', () => {
  // Add parent class to move label above input
});

input.addEventListener('blur', () => {
  // Check if input has value
  // Remove parent class to reset label
});
しかし、すべてのこのオーバーヘッドの代わりに、我々は:focus and :placeholder-shown CSSルール:
input:focus + label,
input:not(:placeholder-shown) + label {
  top: 14px;
  left: 6px;
  font-size: 12px;
  color: #fff;
}
ここでは、入力がフォーカスを持っているか、表示されていないプレースホルダがないかどうかをチェックします.これらの状態のいずれかを適用する場合は、左上にラベルのフロートがあります.
JSイベントハンドラよりもずっと簡単な地獄!😉

以下にアクションを使用したビデオを示します.
私のブログでJSBITより多くのチェックインをチェックしてください.jsbits-yo.com . または私に従ってくださいTikTok .
TIL41. Python:Pre-Course中間試験
React. パフォーマンスの向上