12

入力フォームをより「使いやすい」方法でスタイル設定する方法について説明しているチュートリアルをどこかで見たのを覚えています。

基本的に、プレースホルダー値があり、入力を入力すると、いわばヒントが非表示になります。

ここで、明確にするために、ヒント (プレースホルダー値のテキスト) がフォーカス時に消えるのではなく、最初に何かを入力し始めたときに軽くなるようにしたいと考えています。良い例:

  • Aardvarkのフォームを確認してください。これはまさに、入力フォームを作成したい方法です。

  • 独自のスタック オーバーフロー — 質問をしようとして、入力フォーム内をクリックしても、すぐにテキストが非表示になるわけではありません。カーソルとヒントが表示されます。ただし、入力を開始すると、ヒントが非表示になります。（上記のアードバークの例のように、すべてを隠すよりも、はるかに明るい色合いにすることをお勧めします。）

この正確な要件を備えたinterwebzのどこかでチュートリアルを読んだことを非常にはっきりと覚えていますが、くそー、ブックマークするのを忘れていました。

提案/リンクはありますか？

[更新: 最近、まさに私がやりたいことを行う jQuery プラグインIn-Field Labelsを見つけました。また、これは同じプラグインの改善へのリンクです。]

4

5 に答える 5

15

HTML5 には、まさにこのタスクのために設計されたplaceholder属性があります。

ただし、これまでのところ WebKit (Safari と Google Chrome で使用されるレンダリング エンジン) のみがサポートしています。プレースホルダーがサポートされていない場合は、Daniel のような JavaScript フォールバックが必要になります。

JavaScript でのサポートを確認するplaceholderのは簡単です。

于 2010-02-14T09:18:56.767 に答える
14

これから始めたいと思うかもしれません：

<input type="text" value="Your Hint Here"
       onFocus="if (this.value == 'Your Hint Here') this.style.color = '#ccc';"
       onKeyDown="if (this.value == 'Your Hint Here') {  
                      this.value = ''; this.style.color = '#000'; }">

ヒント文字列を 3 回繰り返さないように JavaScript 関数を使用するように上記を微調整する必要があるかもしれませんが、これで正しい方向に進むことができると思います。

また、 vark.comの「今すぐ参加」フォームも、カーソル位置をテキスト ボックスの最後ではなく、最初に設定していることに気付きました。クロスブラウザーで動作させるのは少し難しいかもしれませんが、Josh Stodolaによる次の記事で提案されている解決策を確認することをお勧めします。

于 2010-02-14T06:55:47.723 に答える
1

入力フィールドに、デフォルト テキストとユーザー入力テキストの両方を同時に含めることはできません。あなたが求めていることを正確に達成する唯一の可能な方法は、表示したいデフォルトのテキストを含む画像を入力フィールドに背景画像にすることですが、テキストの2つのレイヤーはユーザー。これを実現する最も一般的な方法 (サンプル サイト vark.com で行われていること) は、focusメソッドを使用してテキストを消去することです。

$('#my_input').focus(function() {
  if($(this).val() == 'default text') {
    $(this).val('');
  }
});

StackOverflow (および Vark.com のサインアップ フォーム) と同じ方法でそれを実現するには、keydownイベントで同じメソッドを使用できます。

$('#my_input').keydown(function() {
  if($(this).val() == 'default text') {
    $(this).val('');
  }
});

フォーカス時の色の変化とキーダウン時のテキストのクリアの両方を実現するには、次のようにします。

// set text to grey on focus
$('#my_input').focus(function() {
  if($(this).val() == 'default text') {
    $(this).css('color', '#999999');
  }
});

// set text to black and clear default value on key press
$('#my_input').keydown(function() {
  if($(this).val() == 'default text') {
    $(this).val('');
    $(this).css('color', '#000000');
  }
});
于 2010-02-14T07:46:14.830 に答える
1

@Paul の投稿に応えて、Android エミュレーターでHTML5プレースホルダーの動作がおかしいことに気付きました。プレースホルダーは、クリックするまで見栄えがよく、カーソルが単語の右側にあると黒くなります。確かに、入力すると消えますが、直感的ではありません。それで、それを修正するためにいくつかのjQueryを書きました (私の HTML5/jQuery バッジはどこにありますか?)

$(document).ready(function() {
    $('input[placeholder]').focus(function() {
        if (!$(this).val()) $(this).val('');
    });
});
于 2010-07-17T21:02:56.910 に答える
0

私は、より適切な名前がないため、永続的なプレースホルダーと呼んだこの例を書きました。

aとをdivラップするもう少しマークアップが必要ですが、これにより他の多くの問題 (プレースホルダーがフォーム データに入ったり、パスワード フィールドが機能しないなど) が解決され、実際のマークアップは非常に読みやすくなっています。次のような結果になります。labelinput

<div class="input-wrapper">
    <label for="id_username">Username</label>
    <input id="id_username" type="text" name="username">
</div>

CSSとJSを含めた後、それはうまくいきます。

于 2011-11-14T21:08:35.143 に答える