1

「名前を入力してください...<input /> 」のような値から始めたいボックスがいくつかあります。

それらにフォーカスすると、値が空になり、入力できます。それらをぼかすと、何も入力されていない場合は、「名前を入力してください... 」に戻ります。

私はこのようなものを考えました：

<input id="name" _startValue="Enter your name..." />

次に、このようなもの：

$(document).ready($("input").val($(this).attr(_startValue)));

これは最初に を に設定する必要valueが_startValueありますが、何もしません。行を次のように置き換えます。

$(document).ready($("input").val("hello"));

ただし、動作するため、問題は$(this)または にあるに違いありませんattr()。

まず、これを機能させるにはどうすればよいですか。第二に、これを非常に遅い方法で実行しようとしている場合、この機能を取得するための良い方法は何ですか?

4

4 に答える 4

4

次のようなプレースホルダーを使用する方がよいと思います。

 <input id="name" placeholder="Enter your name..." />
于 2012-11-26T04:39:16.190 に答える
1 
                // v---you're not passing a function
 $(document).ready($("input").val($(this).attr(_startValue)));
          // `this` isn't magic-------^---- It doesn't just mean what you want

このようにする必要があります：

$(document).ready(function() {
    $("input").val(function() {
        return $(this).attr("_startValue");
    });
});
于 2012-11-26T04:40:04.053 に答える
1

このためのライブラリはすでに存在します。すでにjqueryを使用している場合は、それらを使用する必要があります。

https://github.com/mathiasbynens/jquery-placeholder

属性「placeholder」を追加して、関数を呼び出すだけです。

<input placeholder="my placeholder">
<script type="text/javascript">
    $("document").ready(function(){
        $("input").placeholder();
    });
</script>

プラグインを追加する必要があるのは、（特にIEで）古いブラウザーのサポートが必要な場合のみであることに注意してください。それ以外の場合は、属性で十分です。

また、これをコーディングすると、フォームのデフォルト値を送信するなどのエラーが発生することを考慮してください。jqueryプラグインが一般的に行うことは、入力が空の場合はaなどを作成<span>して入力の上に配置し、入力が空でない場合は非表示にすることです。

于 2012-11-26T04:48:06.827 に答える
0

プレースホルダーを模倣する一般的な方法は、プレースホルダー テキストを要素の値に配置し、次のようにフォーカス時に値を確認することです。

if (this.value == this.defaultValue) this.value = '';

そしてぼかしで：

if (this.value == '') this.value = this.defaultValue;

ラベルやオンスクリーン ヘルプ (日付の書式など) の代わりにプレースホルダーを使用しないでください。ブラウザーがプレースホルダー属性をサポートしていない場合、デフォルト値に使用することが問題になる場合は、それらをエミュレートしないことをお勧めします。

結局のところ、プレースホルダーは「あると便利」なものであり、フォームを正しく使用するための基本的なものであってはなりません。

于 2012-11-26T05:24:08.873 に答える