0

現在フォーカスされている要素を切り離して再度挿入するときに、Tab キーを使用してフィールド間を移動すると問題が発生します。jsfiddleで私のコードを見つけてください。. 以下も参照してください。

JS コード:

$(document).ready(function() {
    $('.formElem').focusin(function() {
        // Remove default text on focus in
        if ($(this).val() == $(this).attr('title')) {
            $(this).val('').removeClass('defaultText');
            if (($(this).attr('id') == 'reg_pwd') || ($(this).attr('id') == 'reg_conf_pwd')) {
                id = '#' + $(this).attr('id');
                marker = $('<span>123</span>').insertBefore($(this));
                $(this).detach().attr('type', 'password').insertAfter(marker);
                marker.remove();

            }
            if ($(this).get(0) != $(':focus').get(0)) {
                $(this).focus();
            }
        }
    }).focusout(function() {
        // Remove default text on focus out
        if ($(this).val() === '') {
            $(this).val($(this).attr('title')).addClass('defaultText');
            if (($(this).attr('id') == 'reg_pwd') || ($(this).attr('id') == 'reg_conf_pwd')) {
                marker = $('<span>123</span>').insertBefore($(this));
                $(this).detach().attr('type', 'text').insertAfter(marker);
                marker.remove();
            }
        }
    });
});​

このコードは、フィールドのタイプをテキストからパスワードに変更し、前後に変更します。クリックするか、Tab を使用してパスワード フィールドに移動すると、再度追加した後にフォーカスが失われます。誰かが理由を理解できるなら、ありがとう。

4

1 に答える 1

0

あなたはhtml5を使用しているように見えるので、おそらく属性を利用できplaceholderます。<input value="blah" />使用する代わりに<input placeholder="blah" />。これで、defaultText クラスが不要になったので、クラスを削除および追加する関連する jquery コードとともに、それを削除できます。

これで、パスワード フィールドの<input type="text" />をに変更することもできます。<input type="password" />あなたが何をしようとしているのかわかりません<span>123</span>。おそらく、私はあなたの質問を完全には理解していません。しかし、以下はあなたがやろうとしている効果を達成しているようです。

jsfiddle もhttp://jsfiddle.net/8BBRC/2

編集: jsfiddle リンクが間違っていました。

<input type="text" class="formElem" id="reg_fullname" name="fullname" placeholder="Full Name" title="Full Name" /><br />
<input type="email" class="formElem" id="reg_email" name="email" placeholder="Email Address" title="Email Address" /><br />
<input type="password" class="formElem" id="reg_pwd" name="pwd" placeholder="Confirm" title="Password" /><br />
<input type="password" class="formElem" id="reg_conf_pwd" name="conf_pwd" placeholder="Confirm Password" title="Confirm Password" /><br />
<input type="submit" id="reg_submit" value="Submit" /><br />
于 2012-12-20T23:15:01.160 に答える