0

単純な電子メール フィールドとパスワード フィールドを使用したログインに取り組んでいます。欲しいものの基本はすべて揃っていますが、すべてをまとめることができません。私が欲しいのは、Twitter と同じ TEXT FIELDS の外観です。つまり、2 つのフィールドが選択されていない場合、「メール」と「パスワード」と表示されますが、選択されている場合、テキストは選択できず、カーソルが前面に表示されます。入力するとすぐにそれらが消え、入力したものが表示されます。

最も簡単な解決策は、背景画像を追加することです。私はこれを行いましたが、この外観は望んでいません。それは私にとって十分に正確ではありません。

私が探しているものと混同している場合は、Twitter にアクセスして、ユーザー名/パスワードが記載されている LOG IN フィールドを確認してください。私はその同じ外観が欲しいです。どんな助けでも大歓迎です。ありがとうございました。

可能であれば HTML、CSS、または JavaScript で指定してください。

4

3 に答える 3

0

まず、javascript....jQuery を使用している場合、これはテキスト フィールドを取得し、それらをクリックするとその値 (電子メールなど) を削除し、それらをフォーカスします。

 $(function() {
    $('input[type=text]').focus(function() {
     $(this).val('');
    });
 });

あなたのhtmlはこれに似ているはずです....

<input type="text" name="email" value="email"/>
<input type="password" name="password" value="password" />

境界線のハイライト効果を得るには、いくつかの css を追加できます。この例では、フォーカスされたときにすべての入力 (テキスト フィールド、テキスト領域など) の周りに緑色の境界線が追加されることに注意してください。これは、id を使用するか、入力タイプを指定することで変更できます。

input:focus { border: 1px solid green;}

フォーカス時ではなくキーダウン時にデフォルトのテキストを非表示にしようとしている場合、1 つの方法は、各入力に ID を与え、フラグを使用してイベント ハンドラー (テキストの非表示など) が有効かどうかを確認することです。各IDですでに起動しています...

 $(function() {
    var passFired = false;
    var emailFired = false;

    var email = $('#email');
    var pass = $('#password');

    email.keydown(function() {
        if(!efired){
            efired = true;
            $(this).val('');
        }
    });


    pass.keydown(function() {
        if(!pfired){
            pfired = true;
            $(this).val('');
        }
    });
});
于 2012-06-12T20:05:44.510 に答える
0 
<script type="text/javascript">
function clearInput(this) {

    var currValue = document.getElementById(this).value;
    if (currValue != '') {
        currValue = '';
    }
}
</script>

<input type="text" id="login" value="email" class="input-box" onchange="clearInput(this);">
<input type="password" id="password" value="password" class="input-box" onchange="clearInput(this);">

これは、should work....によってテストされていません。

任意の数の JS イベントを使用できるため、必要なタイミングを提供するものを選択する必要があります。

お役に立てれば。

于 2012-06-12T20:49:31.417 に答える
0

placeholder="your placeholder"入力で使用してみてください。

その後、フォールバック jquery スクリプトを使用して、古いブラウザーに機能を提供できます。

于 2012-06-12T19:58:42.970 に答える