スタックオーバーフローのようなウォーターマークをフォームに実装するにはどうすればよいですか?

https://stackoverflow.com/questions/2260367

20-09-2019
|

質問

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

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

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

フォームをチェックしてくださいツチブタ. 。これはまさに私が入力フォームに望む方法です。
私たち独自の Stack Overflow — 質問しようとするときに入力フォーム内をクリックしても、テキストはすぐには非表示になりません。カーソルとヒントが表示されます。ただし、入力を開始すると、ヒントが非表示になります。(ただし、上記のツチブタの例のように、すべてをまとめて隠すよりも、はるかに明るい色合いにすることを好みます。)

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

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

[アップデート：最近jQueryプラグインを見つけましたインフィールドラベルそれはまさに私が望んでいることです。また、ここにリンクがあります同じプラグインの改良です。]

解決

ここから始めるとよいでしょう:

<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 また、カーソル位置をテキストボックスの末尾のままにするのではなく、先頭に設定します。これをクロスブラウザーで動作させるには少し注意が必要ですが、次の記事で提案されている解決策を確認してください。ジョシュ・ストドラ:

Javascript を使用してテキストボックスまたはテキストエリア内のカーソル位置を設定する

他のヒント

HTML5は、この非常に作業のために設計されている placeholder属性を、持っています。

のみのWebKit（SafariとGoogle Chromeで使用されるレンダリングエンジン）これまでにかかわらず、それをサポートしています。プレースホルダがサポートされていないときのためにダニエルのようなJavaScriptのフォールバックをお勧めします。

これは JavaScriptのの中placeholderのサポートを確認するために些細なのです。

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

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

StackOverflow (および Vark.com のサインアップフォーム) と同じ方法でこれを実現するには、キーダウンイベント：

$('#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');
  }
});

ポールのポスト@に応じて、私はのHTML5 のプレースホルダーは、私のAndroidのエミュレータ上で奇妙な行為の行動に気づきました。あなたはそれをクリックして、単語の右側にカーソルを持つ黒になるまでのプレースホルダが素晴らしいです。あなたはそれが消えますと入力した場合、確かに、それは直感的ではありません。だから私は（ここで、私のHTML5 / jQueryのバッジだ？）

それを修正するために、のjQueryののいくつかを書きました

$(document).ready(function() {
    $('input[placeholder]').focus(function() {
        if (!$(this).val()) $(this).val('');
    });
});

私はこの例を書いたのI-のためのより良い名前の不足永続的なプレースホルダを-calledます。

これは、もう少しマークアップ、divとlabelを包むinputが必要ですが、それは（プレースホルダが機能していないフォームデータやパスワードフィールドに入るように）他の問題の多くを解決し、実際のマークアップが読み非常にきれいです。あなたはこのようなものになってしまいます：

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

とCSSやJSを含めた後、それだけで動作します。

ライセンス： CC-BY-SA と帰属

所属していません StackOverflow

スタック オーバーフローのようなウォーターマークをフォームに実装するにはどうすればよいですか?

スタックオーバーフローのようなウォーターマークをフォームに実装するにはどうすればよいですか?