-2

メール テキストボックスとパスワード テキストボックスを含むログイン ページがあります。両方のテキスト ボックスには、それぞれ「メール アドレス」と「パスワード」という既定のテキストがあります。ユーザーがいずれかのフィールドに値を入力すると、デフォルトのテキストがクリアされます。ユーザーがパスワードを記憶するようにブラウザを設定している場合を除いて、これは機能しています。

パスワードが自動的に入力されると、デフォルトのテキストはクリアされないため、2 つのテキストのように見えます。

関連する HTML:

<div class="input-wrapper">
<label for="txtSID">Email address</label>
<input type="text" id="txtSID" name="txtSID" class="text" />
</div>                              

<div class="input-wrapper">
<label for="txtPassword">Password</label>
<input type="password" id="txtPassword"  name="txtPassword" class="text" />
</div>

関連する CSS:

input.text {    
    position: relative;
    display: -moz-inline-box; /* ff2 */
    display: inline-block;
    *display: inline; /* ie6&7 */
    zoom: 1;
}

.input-wrapper {
    position: relative;
    display: -moz-inline-box;
    display: inline-block;
    *display: inline; /* ie6&7 */
    zoom: 1;
}

.input-wrapper input.text {
    z-index: 2;
    margin: 0;
    border: 0;
    background: transparent;
    *background: url(http://hunch.com/media/img/t.png); /* ie7 does weird stuff with transparent background, also please don't deep link to this image from your code */
}

.input-wrapper label {   
    z-index: 1;
    position: absolute;  
    overflow: hidden;
}

.input-wrapper.focus label {
    filter:alpha(opacity=50);
    opacity: 0.6;
}

.input-wrapper.filled label {
    display: none;
}

関連する Jquery:

$(document).ready(function() {

    var parentSelector = '.input-wrapper',
    inputSelectors = [parentSelector + '>input.text', parentSelector + '>textarea'],
    len = inputSelectors.length,
    i;

    function update(force) {
        var $input = $(this),
        $parent = $input.parent(parentSelector);
        return $parent[force === true || $input.val() ? 'addClass' : 'removeClass']('filled');
    }

    function focus() {
        update.call(this).addClass('focus');
    }

    function blur() {
        update.call(this).removeClass('focus');
    }

    function keydown(evt) {
        var c = evt.keyCode;
        ((47 < c && c < 91) || (95 < c && c < 112) || (185 < c && c < 223)) && update.call(this, true);
    }

    $.fn.prepareInput = function() {
        return this.each(update);
    };

    for (i = 0; i < len; i++) {
        $(inputSelectors[i]).live('focus', focus).live('blur', blur).live('keyup', update).live('click', update).live('keydown', keydown);
    }

    $(function() {
        for (i = 0; i < len; i++) {
            $(inputSelectors[i]).prepareInput();
        }
    });
});
4

1 に答える 1

0

イベントに依存しKeyDownてデフォルト値 (実際にはPlaceholderと呼ばれる) をクリアするため、問題が発生します。

その他のオプション：

HTML5 プレースホルダー属性を使用してみてください。

<input type="text" placeholder="Email address" id="txtSID" name="txtSID" class="text"/>
<input type="password" placeholder="Password" id="txtPassword"  name="txtPassword" class="text" />

ブラウザーのサポートはまだ 100% ではありませんが、これにより、目的を達成するための標準的な方法が得られます。

注:自動入力がイベントをトリガーするように見えるonchangeので、代わりに使用してみてくださいonkeydown。

HTML5 を使用しない簡単でクリーンな Placholder について は、jquery-watermarkをご覧ください。

自動入力をオフにするには、こちらを参照してください。

于 2012-09-05T21:43:00.560 に答える