Bir giriş metnindeki metin formatı nasıl düzeltilir?

JQuery kullanıyorum ve kullanıcının 'mm-gg-yyyy' tarihini girmesine izin vermek için bir giriş oluşturmak istiyorum.

örnek: kullanıcı hanesi 12 (ayın numarası) olduğunda, - 'i otomatik olarak göstermek istiyorum. mümkün mü?

1
Web tabanlı girdiler için hala iyi bir maskeleme çözümü bulamadım. Karşılaştığım her birinin biraz tuhaflığı var; ve orada çok fazla tuhaflık var. Maskelemeyi kullanacaksanız, mevcut bir çözümü kullanmak en iyisidir: ör. digitalbush.com/projects/masked-input-plugin
katma yazar rkw, kaynak

3 cevap

$('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);
});

İşte canlı bir demo:

http://jsfiddle.net/AUAJ3/

GÜNCELLEME:

Bazı optimizasyonlar:

  • "Özel" tuşlardan birine basılırsa keydown / keyup olaylarını durdurmamalısınız (bu durumda delete , geri al ve ok tuşlarını kullanın
  • Basılı anahtar geçerli bir sayıysa (0-9) ve etkinlik kimliğini durdurmuyorsa keydown 'u kontrol etmelisiniz
  • Düzeltme algoritmasını değiştir etkinliğine de bağlayın
$('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
}

İşte canlı bir demo:

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

İKİNCİ GÜNCELLEME:

Kullanıcıyı, giriş alanınızın gerektirdiği tarih biçiminde bilgilendirmelisiniz.
Bu yeni özellik için güncellenmiş demo konusuna bakın.

5
katma
@ gion_13, metnin sonunda odağın ayarlandığı problem ... içerideki bir sayıyı değiştirmem gerekirse tüm metni silmeli ve yeniden yazmalı.
katma yazar Dail, kaynak
@Dali: güncellenmiş cevaba bakınız
katma yazar gion_13, kaynak
Mükemmel bir soluk. Aynı anda birden fazla baskıyı hesaba katar. oy verildi!
katma yazar Marco Johannesen, kaynak

Bunu deneyin: 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
katma

şunu bir kontrol et

$(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 + '-';
                    });
            }

        });
}) ;

Ve html

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

And live demo here

Düzenle : Maksimum uzunluğu ayarlamak için bunu kullanın

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

Demo

0
katma
işe yaramıyor: 12-12-222222222222 sonsuz bir metin. Sabit uzunluğa ihtiyacım var.
katma yazar Dail, kaynak
Düzenlenmiş cevabımı kontrol et .....
katma yazar Rupesh Pawar, kaynak