0

このコードでフィールドを作成します

<tr><td> <input type="text" value="good"  onfocus="if (this.value == 'good') {this.value=''}" onblur="if(this.value == '') { this.value='good'}" name="name" maxlength="254" class="required" /></td></tr>

ユーザーがフィールドをクリックすると、クリアで空のフィールドができます。ユーザーがフィールドを空にすると、この値が書き戻されます。goodしかし、それは私が望むものではありません。ユーザーが文字を入力すると、Facebookのユーザー登録フォームのような方法を探しています値をクリアし、ユーザーがフィールドを空のままにしておくと、このフィールドにデフォルト値が入力されます..誰かがこのjavascriptまたはjqueryを手伝ってくれますか?

4

3 に答える 3

1

placeholderそのために属性を使用できます

<tr>
    <td>
        <input type="text" placeholder="good" name="name" maxlength="254" class="required" />
    </td>
</tr>

これは、ユーザーがテキストを入力していない限り表示されますが、value属性は変更されません。

テスト用のJSFiddle。

于 2013-02-26T19:09:24.477 に答える
1

入力を次のように変更してみてください。

<tr>
    <td>
        <input type="text" value="good" placeholder="good" name="name" maxlength="254" class="required defaultText" />
    </td>
</tr>

そして、いくつかの jQuery コードを追加します。

$(document).ready(function() {
    $(".defaultText").focus(function(srcc) {
        if ($(this).val() == $(this)[0].placeholder) {
            $(this).val("");
        }
    });

    $(".defaultText").blur(function() {
        if ($(this).val() == "") {
            $(this).val($(this)[0].placeholder);
        }
    });

    $(".defaultText").blur();        
});

defaultTextスタイル クラスは html 要素を選択するために使用されplaceholder、要素内の はそのデフォルト値を定義しています。

編集:titleのために変更されましたplaceholder。このようにして、html5 以前と互換性があります。

例はこちらから。

于 2013-02-26T19:10:57.863 に答える
1

プレースホルダー属性が有効でない場合は、onfocus の代わりに onkeydown イベントを使用できます。

于 2013-02-26T19:12:19.260 に答える