3

これは簡単だと思いましたが、CSS を使用してページ上の空でないテキスト領域をターゲットにできることを示すものは何も見つかりません。

CSS がこれを絶対にサポートしていない場合は JS で問題ありませんが、jQuery を使用してもセレクターを使用する方法が見つからず、明示的に .val() を確認する必要があります。

いくつかのコンテキスト: オプションの textarea があり、フォーカスに応じて拡張されますが、ユーザーが何かを入力することを決定した場合、フォーカスが離れたときに再び縮小したくありません。

4

5 に答える 5

4

マークアップに関して言えば、:emptyセレクターを使用すると、コンテンツがまったくなく、空白や改行も含まれていないテキスト領域を選択できるようにする必要があります。逆に:not(:empty)、空でないテキストエリアを選択できるようにする必要があります。

ただし、CSS のセレクターはほとんどが静的です。つまり、ページの読み込み後にテキストエリアのコンテンツを編集した場合などの動的な変更は考慮されません。さらに、セレクター like:emptyは、一般的にコンテンツノードの存在 (または不在) をチェックするため、テキストエリアの値を実際には考慮していないため、フォームではうまく機能しないと思われます。

フォーム フィールドの値に基づいてスタイルを動的に適用する必要がある場合は、スクリプトを使用して値をチェックする必要があり.val()ます。

于 2013-04-14T18:08:10.347 に答える
1

$('textarea:empty')は良い方法ですが、コンテンツが絶えず変化し、ある時点で空になり、次の時点で空ではない可能性があるテキストエリアを扱っているため、ユーザーがテキストエリアに出入りするたびにチェックする必要があります。

最終的にテキストエリアにクラスを追加し、起動する.emptyたびにその値をチェックしまし.focusoutた。

$('textarea').focusout(function() {
  if ($(this).val() == '') { $(this).addClass('empty'); }
  else { $(this).removeClass('empty'); }
  });

.emptyこのようにして、ユーザーが何かを入力し、それをすべて削除することを決定した後でも、スタイルシートにスタイリングを保持し、によって定義されたルールを使用できます。

于 2013-04-14T18:27:25.143 に答える
1

:invalid & :validCSS3 疑似クラスを見てください。

デモ

<textarea required="required"></textarea>

textarea:invalid{background:red}
textarea:valid{background:blue}
于 2013-04-14T18:12:51.487 に答える
1

はい、次のように jQuery で実行できます。

$('textarea:not(:empty)').css('color','red');

デモはこちら

于 2013-04-14T18:10:38.753 に答える
1

を使用しては.filter()どうですか？

    $("input").filter(function() { return this.value == ""; }).css('dosomething');
于 2013-04-14T18:22:52.733 に答える