1

登録フォームでjQueryMaskedInput Plugin（http://digitalbush.com/projects/masked-input-plugin/）を使用したい。私のフォームはそのように見えます

..。

<input  class="part1" type="text" name="lname"  value="Last Name" onfocus="if(this.value=='Last name') {this.style.color='#aea592';this.style.fontStyle='normal'; this.value=''};" onblur="if(this.value=='')  {this.style.color='#aea592'; this.style.fontStyle='italic'; this.value='Last name'}"  />
<input class="part2" type="text" id="dob" name="dob"  value="Date of Birth" onfocus="if(this.value=='Date of Birth') {this.style.color='#aea592';this.style.fontStyle='normal'; this.value=''};" onblur="if(this.value=='')  {this.style.color='#aea592'; this.style.fontStyle='italic'; this.value='Date of Birth'}" />

..。

ファイルの終わり

<script src="core/code/js/mask.js"></script>
<script type="text/javascript">
jQuery(function($) {
    $('#dob').mask('99.99.9999', {placeholder:' '});
});
</script>

ページを開くと、[名前]フィールドに「名前」という単語が表示されますが、生年月日には何も表示されません。http://prntscr.com/2miaa onfocusイベントに対してのみマスクプラグインをアクティブ化するにはどうすればよいですか？

4

1 に答える 1

6

Yarr ...わかりました、最初にマークアップ内にそれほど多くのスクリプトを入れないでください。読むのは難しく、維持するのはさらに難しくなります。まず、フォームのスタイルと機能を分離してみましょう。

編集：これの実用的な例はhttp://jsfiddle.net/ninjascript/RuFHK/2/で見つけることができます

CSS

input { color: #aea592; }
input.default { font-style: italic; }

HTML

<input class="part1 default" type="text" name="lname" value="Last Name"/>
<input class="part2 default" type="text" id="dob" name="dob" value="Date of Birth"/>

JavaScript

$('input').bind('focus', function() {
    var el = $(this);
    if (el.hasClass('default')) {
        el.removeClass('default').val('');
    }
});

ふぅ...わかりました、それは少し理解しやすいです。ここで、フォーカスでもう1つだけ発生させたいのですが、それは#dob要素に含まれる値にマスクを適用することです。編集したブロックは次のとおりです。

$('input').bind('focus', function() {
    var el = $(this);
    if (el.hasClass('default')) {
        el.removeClass('default').val('');
    }
    if (el.attr('id') === 'dob') {
        $(this).mask('99.99.9999', {placeholder:' '});
    }
});

これで、入力はフォーカスを取得した後にのみマスクする必要があります。

送信時に何らかの値が返されることを確認したい場合は、いつでも「blur」のコンテンツを検証できます。このフォームのすべてのフィールドにifステートメントを記述したくないので、各フィールド名とそのデフォルト値をマップして、それを参照します。

var defaultValues = {
    'lname': 'Last Name',
    'dob': 'Date of Birth'
};

これで、フィールドにデフォルト値を再入力する必要があるときはいつでも、そのマップを参照できます。DOBフィールドの場合、入力マスクプラグインにも「マスク解除」オプションがあるように見えます。残念ながら、マスク内の文字は#dobフィールドの値の一部であるため、空の値をチェックすることはできません。代わりに、空白と「。」だけで構成される値をチェックする正規表現を使用します。chars：

$('input').bind('blur', function() {
    var el = $(this);
    var name = el.attr('name');

    // Really we only want to do anything if the field is *empty*
    if (el.val().match(/^[\s\.]*$/)) {

        // To get our default style back, we'll re-add the classname
        el.addClass('default');

        // Unmask the 'dob' field
        if (name === 'dob') {
            el.unmask();
        }

        // And finally repopulate the field with its default value
        el.val(defaultValues[name]);
    }
});
于 2011-08-13T06:27:12.567 に答える