2

そのため、私の Web サイトでは、ログイン フィールドを機能させたいと考えています。ユーザー名フィールドをクリックすると、プレースホルダーの「ユーザー名」が消えて、ユーザー名を入力できるようになります。何も入力せずにクリックすると、プレースホルダーが再表示されます。私が抱えていた問題は、ユーザー名を入力してクリックしても、プレースホルダーが元の位置に戻り、入力したユーザー名が置き換えられることでした。それを修正するために入れたコードは次のとおりです。

$('#user').focus(function(){
    $(this).val('');
    $(this).css("color","black");
    }).blur(function(){
        var x = parseInt($(this).val(),10);
        if(x==0){
            $(this).val('Username');
        }
        else{
            $(this).val('youmessedup') /* I put this here just to see 
    if it was the conditional that wasn't working, which it was */;
        }
        $(this).css("color","grey");
});

これが私のhtmlコードです

<form>
    <br />
    <input id ="user" type=text value="Username">
</form>

パスワード入力も兼ねて投稿しますが、 #pass のIDだけでも全く同じです。

ここで何が間違っているのか本当にわかりません。私が考えているのは、 val は私が考えているのとはまったく異なるデータ型であるということですか? .val() がテキスト領域内の値を取得することを理解しています。そうですか？私が間違っている場合は、誰かが私を修正してください。

4

1 に答える 1

1

アンドリのコメントが最善の解決策だと思いますが、コードが機能しない理由を説明させてください。

問題は次の行から発生します。

var x = parseInt($(this).val(),10);

parseInt任意の文字を含むことができる文字列で使用しています。ドキュメントを見ると、

最初の文字を数値に変換できない場合、parseInt は NaN を返します。

したがって、入力されたユーザー名は常に に変換されますがNaN、これは 0 ではありません。したがって、x==0常に失敗します。

この行を次のように変更します。

var x = $(this).val().length;

このようにして、入力したユーザー名の長さをテストします。

問題は、ユーザーがフィールドをもう一度クリックすると、自分のユーザー名を入力したとしても、その内容が消去されることです。値が「ユーザー名」以外のものであるかどうかをテストすることで、この問題を防ぐことができます。

if ($(this).val() == 'Username') {
    $(this).val('');
}

コードは次のようになります。

$('#user').focus(function(){
    if ($(this).val() == 'Username') {
        $(this).val('');
    }
    $(this).css("color","black");
}).blur(function(){
    var x = $(this).val().length;
    if(x==0){
        $(this).val('Username');
    }
    $(this).css("color","grey");
});

ここに小さな jsFiddle を書きました。それが役に立てば幸い ：）

于 2013-02-24T13:28:32.737 に答える