2

jQueryフォーム検証プラグインを構築しています。このスクリプトは、title 属性を使用して入力フィールドにラベルを付けます。これにより、フィールド タイトルが読めるように、入力テキストの入力パスワードが置き換えられました。

$(FormID).find('input:password').each(function() {  
    $("<input type='text'>").attr({ name: this.name, value: this.value, title: this.title, id: this.id }).insertBefore(this); 
}).remove();

パスワード入力ボックスをクリックすると、期待どおりに機能します。次のコードは、テキスト入力をパスワード入力に置き換え、ラベルを削除し、適切なスタイルとフォーカスを適用します。

$(":input").focus(function(){//Clears any fields in the form when the user clicks on them       
   if ($(this).hasClass("va") ) {
        $(this).val('');
        $(this).removeClass("va").addClass('focused');
   }
});
$(':input[title]').each(function() {//Add the title attribute to input fields and disappear when focused 

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

    $(this).focus(function() {
        if($(this).val() == $(this).attr('title')) {
            $(this).val('').addClass('focused');
        }
        if ($(this).attr('id')=="pass1" || $(this).attr('id')=="pass2") {
            $("<input type='password'>").attr({ name: this.name, title: this.title, id: this.id }).insertAfter(this).prev().remove();
            $("#"+$(this).attr('id')).focus().addClass('focused');
        }
    });

    $(this).blur(function() {
        if($(this).val() === '') {
            $(this).val($(this).attr('title')).removeClass('focused');
        }
        if ($(this).attr('id')=="pass1" || $(this).attr('id')=="pass2") {
            $("<input type='text'>").attr({ name: this.name, value: this.value, title: passtitle, id: this.id }).insertAfter(this).prev().remove();
            $("#"+$(this).attr('id')).blur().removeClass('focused');
        }
    });
});

ユーザーがフォーカスされた入力ボックスの外側をクリックしても、ぼかし機能は起動しません。他のフォーム要素のようにぼかすにはどうすればよいですか?

4

1 に答える 1

1

更新：あなたの質問をより徹底的に読み直した後、私は答えを変更しています。

基本的に、入力がフォーカスされていないときに、入力要素の「タイトル」をボックスに表示しようとしています。これはよくあることですが、あなたのアプローチは時代遅れです。代わりに HTML5 の「プレースホルダー」属性を使用することをお勧めします。これは、最新のブラウザーにネイティブです (古いブラウザーと IE 用のソリューションがあります)。ただし、パスワード フィールドにプレースホルダー テキストを表示することはできません。一般的に、これは実際に必要とされるべきではなく、私の意見ではまったく行われるべきではありません。通常、パスワード フィールドは通常のテキスト フィールドとは外観が若干異なるため、入力内容を変更すると、表示に若干の不具合が生じる場合があります。

プレースホルダーを使用するには、次のように入力を作成するだけです。

<input name="username" placeholder="Username" type="text" />

「プレースホルダー」属性は、入力に表示されるテキストを入力するために使用されますが、入力の実際の値には影響しません。

IE のサポート不足を修正するために、しばらく前に githubで次のjquery プレースホルダー プラグインを作成しました。

ここで、元のソリューションよりもクリーンな完全な作業例を次に示します。FF17 と IE9 でテストしました。パスワード入力は実際には TEXT フィールドとして開始されるため、デフォルトでプレースホルダーが表示されることに注意してください。ユーザーがフォーカスして何かを入力した場合にのみパスワードに変わります。

<!DOCTYPE html>
<html>
<head>
    <script src="http://code.jquery.com/jquery.min.js" type="text/javascript"></script>
    <script src="jquery.placeholder.js" type="text/javascript"></script>
</head>

<body>
    <form>
        <input name="username" placeholder="Username" type="text" />
        <input name="password" placeholder="Password" type="text" data-ispw="1" />
    </form>
</body>

<script type="text/javascript">
$(function(){
    // make sure to include the jquery.placeholder.js plugin before using this
    $(':text[placeholder]').placeholder();
    $('form').on({
        focus: function(e){
            // swap to password
            $(this).prop('type', 'password');
        },
        blur: function(e){
            var me = $(this);
            if (me.val() == '') {
                // swap to text; if no value is entered
                me.prop('type', 'text');
            }
        }
    }, ':input[data-ispw]')
});
</script>
</html>

繰り返しますが、このようにパスワード入力を交換するという考えは好きではありませんが、それぞれ独自のものに変更してください! 幸運を！

于 2012-12-10T15:20:58.777 に答える