如何在输入文本中修复文本格式？

Question

我正在使用JQuery，我希望创建一个输入，让用户将日期'mm-dd-yyyy'数字化。

示例：当用户数字12（月份的数量）时，我想自动显示-。有可能吗？

Answer 1

$('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/

更新：

一些优化：

• 如果按下其中一个“特殊”键，则不应停止keydown / keyup事件（特别是我的意思是 delete ，退格和箭头键），允许您更改当前值
• 如果按下的键是有效号码（0-9），则应检查keydown并停止事件ID
• 将校正算法绑定到change事件

$('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/

第二次更新：

您应该告知用户输入字段所需的日期格式 有关此新功能，请参阅updated demo。

Answer 2

试试这个：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);
    }

});

Answer 3

检查这个

$(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">

现场演示here

编辑： 要设置最大长度，请使用此

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

Demo