入力テキストのテキスト形式を修正する方法は?

私はJQueryを使用しており、ユーザーが 'mm-dd-yyyy' の日付を入力できるように入力を作成したいと思います。

例:ユーザの数字12(月の数字)が自動的に - を表示したいとき。出来ますか?

1
私はまだウェブベースの入力のためのまともなマスキングソリューションを見つけていません。私が遭遇するすべての人には、小さな奇妙なものがあります。そこにはたくさんの欠点があります。マスキングを使用する場合は、既存のソリューションを使用することをおすすめします。 digitalbush.com/projects/masked-input-plugin
追加された 著者 rkw,

3 答え

$('input').keyup(function(e){
    var val = $(this).val();
    val = val.replace(/[^0-9]/g,'');
    if(val.length >= 2)
        val = val.substring(0,2) + '-' + val.substring(2); 
    if(val.length >= 5)
        val = val.substring(0,5) + '-' + val.substring(5); 
    if(val.length > 10)
        val = val.substring(0,10);
    $(this).val(val);
});

ライブデモがあります:

http://jsfiddle.net/AUAJ3/

更新:

いくつかの最適化:

  • 「特別な」キーのいずれかが押された場合(特別な場合は delete )、 keydown 現在の値を変更できる、バックスペース、および矢印キー)
  • 押されたキーが有効な数字(0〜9)であれば keydown をチェックし、そうでないイベントIDを停止する必要があります。
  • 修正アルゴリズムを変更イベントにもバインドします
$('input')  
    .change(function(e){
        $(this).val(formatDate($(this).val()));
    })
    .keyup(function(e){
         if(isSpecialKey(e.keyCode))
            return true;
          $(this).val(formatDate($(this).val()));
    })
    .keydown(function(e){
        if(isSpecialKey(e.keyCode))
            return true;
        var k = e.charCode || e.which;
        var keyVal = String.fromCharCode(k);
        if(!/[0-9]/.test(keyVal) || $(this).val().length > 9)
            {
                e.preventDefault();
                return false;
            }
    });

function formatDate(val){
    val = val.replace(/[^0-9]/g,'');
    if(val.length >= 2)
        val = val.substring(0,2) + '-' + val.substring(2); 
    if(val.length >= 5)
        val = val.substring(0,5) + '-' + val.substring(5); 
    if(val.length > 10)
        val = val.substring(0,10);
    return val;
}

function isSpecialKey(k){
    for(var i in KEY)
        if(KEY[i] == k)
            return true;
    return false;
}

var KEY = {
    'delete' : 46,
    'backspace' : 8,
    'left' : 37,
    'right' : 39,
    'up' : 38,
    'down' : 40
}

ライブデモがあります:

http://jsfiddle.net/AUAJ3/2/

第2の更新:

入力フィールドに必要な日付形式をユーザーに知らせる必要があります。
この新機能については、デモのアップデートをご覧ください。

5
追加された
@ gion_13、フォーカスがテキストの最後に設定されているという問題...内部の数字を変更する必要がある場合は、すべてのテキストを削除して書き直す必要があります。
追加された 著者 Dail,
@ダリ:更新された答えを見る
追加された 著者 gion_13,
完全なsoloution。一度に複数のプレスを考慮に入れます。投票した!
追加された 著者 Marco Johannesen,

これを試してください: http://jsfiddle.net/g8KSg/ :)

$('#checkval').keyup( function() {

    var value = $(this).val();

   //check for first 2 chars
    if(value.length === 2) {
        value += "-";
        $(this).val(value);
    }

   //check for first 4 + "-"
    if(value.length === 5) {
        value += "-";
        $(this).val(value);
    }

});
0
追加された

これをチェックして

$(document).ready( function() {
        $("#mytextbox").attr('maxlength', 10);       
        $('#mytextbox').keyup(function(e){
            var value = $(this).val();
            if(value.length == 2)
            {
                $(this).val(function(index, val) {
                        return val + '-';
                    });
            }
            if(value.length == 5)
            {
                $(this).val(function(index, val) {
                        return val + '-';
                    });
            }

        });
}) ;

そしてhtml

<input type="text" id="mytextbox">

And live demo here

編集: 最大長を設定するには、これを使用します

$("#mytextbox").attr('maxlength', 10);

デモ

0
追加された
それは動作しません私は書くことができます:12-12-222222222222無限のテキスト。私は固定長が必要です。
追加された 著者 Dail,
私の編集された答えをチェック.....
追加された 著者 Rupesh Pawar,