0

我有这个 id 验证字段，我只需要知道如何使验证以及 keydown 和 keyup 函数在克隆输入上工作。插入的数据也将转移到重复字段。

js小提琴-http ://www.jsfiddle.net/dawidvdh/xRh9v/

继承人的js：

$(document).ready(function() {
    idAmount = [0,1,2,3,4,5,6,7,8,9,10,12,13];
    var idinc =1;
    var id_val;

    jQuery(idAmount).each(function() {
        var index = "id"+idinc++;
        var id_input = "<input class='id' id="+'"'+index+'"'+" "+" maxlength='1' />";
        id_val = $(this).attr('value');
        jQuery(id_input).appendTo('#id');
    });

    $("#clone").click(function () {
        var clonedObj=$('#id').clone().insertAfter("#id");
        clonedObj.find('.id').each(function(){
           this.id='id' + idinc++;
        });
    });

function Validate() {
    jQuery('#error p').remove();

    var id_val = '';
    $('.id').each(function(){ id_val+=($(this).val());});
    var idNumber = id_val;
    console.log(id_val);
    var correct = true;

    if (idNumber.length != 13 || !isNumber(idNumber)) {
        correct = false;
    }

    var tempDate = new Date(idNumber.substring(0, 2), idNumber.substring(2, 4) - 1, idNumber.substring(4, 6));
    console.log(tempDate);
    var id_date = tempDate.getDate();
    var id_month = tempDate.getMonth();
    var id_year = tempDate.getFullYear();
    var currentYear = (new Date).getFullYear();
    var age = currentYear - id_year;
    var fullDate = id_date + "-" + (id_month + 1) + "-" + id_year;


    if (!((tempDate.getYear() == idNumber.substring(0, 2)) && (id_month == idNumber.substring(2, 4) - 1) && (id_date == idNumber.substring(4, 6)))) {
        correct = false;
    }

    // get the gender
    var genderCode = idNumber.substring(6, 10);
    var gender = parseInt(genderCode) < 5000 ? "Female" : "Male";

    // get country ID for citzenship
    var citzenship = parseInt(idNumber.substring(10, 11)) == 0 ? "Yes" : "No";

    // apply Luhn formula for check-digits
    var tempTotal = 0;
    var checkSum = 0;
    var multiplier = 1;
    for (var i = 0; i < 13; ++i) {
        tempTotal = parseInt(idNumber.charAt(i)) * multiplier;
        if (tempTotal > 9) {
            tempTotal = parseInt(tempTotal.toString().charAt(0)) + parseInt(tempTotal.toString().charAt(1));
        }
        checkSum = checkSum + tempTotal;
        multiplier = (multiplier % 2 == 0) ? 1 : 2;
    }
    if ((checkSum % 10) != 0) {
        correct = false;
    };

    // if no error found, hide the error message
    if (correct) {
        jQuery('.id').css("border","1px solid #9A8B7D");


        // clear the result div
        jQuery('#result').empty();
        // and put together a result message
        jQuery('#result').append('<p>South African ID Number:   ' + idNumber + '</p><p>Birth Date:   ' + fullDate + '</p><p>Gender:  ' + gender + '</p><p>SA Citizen:  ' + citzenship + '</p><p>AGE:  ' + age + '</p>');
        jQuery('#status').html("correct");
    }
    // otherwise, show the error
    else {
        jQuery('.id').css("border","1px solid #FF0000");
        jQuery('#status').html("incorrect")
    }

    return false;
}

function isNumber(n) {
    return !isNaN(parseFloat(n)) && isFinite(n);
}

$('input.id').keydown(function(e){
    if(e.keyCode == 8){
        $(this).val('');
        $(this).prev().val('');
        $(this).prev().focus();
         Validate()
    }
});  

$('input.id').on('keyup', function(){
    if (this.value.match(/\d+/)) {
        var $this = $(this);
        if ($this.next('input').length) {
          $this.next().focus();
        } else {
          Validate()
        }  
    }
});



    $(".id").keydown(function(event) {
        // Allow: backspace, delete, tab, escape, and enter
        if ( event.keyCode == 46 || event.keyCode == 8 || event.keyCode == 9 || event.keyCode == 27 || event.keyCode == 13 || 
             // Allow: Ctrl+A
            (event.keyCode == 65 && event.ctrlKey === true) || 
             // Allow: home, end, left, right
            (event.keyCode >= 35 && event.keyCode <= 39)) {
                 // let it happen, don't do anything
                 return;
        }
        else {
            // Ensure that it is a number and stop the keypress
            if (event.shiftKey || (event.keyCode < 48 || event.keyCode > 57) && (event.keyCode < 96 || event.keyCode > 105 )) {
                event.preventDefault(); 
            }   
        }
    });
});

HTML：

<div id="id">
<span id="label">ID NUMBER:</span>
<span id="status"></span>
    </div>
<button id="clone">clone</button>

<div id="result"> </div>

CSS：

#error {
    color: red;
    border: 1px solid red;
    padding: 5px;
    display: none;
}

#result {
    padding: 20px;
}

.id {
    width:16px;
    height:16px;
    border:1px solid #9A8B7D;
    margin:0;
    float:left;
    text-align:center;
    font-family:'itc_avant_garde_gothic_bookOb',Helvetica,sans-serif;
    font-size:11pt;
    padding:2px;
}
#label {
    float:left;
    font-family:'itc_avant_garde_gothic_bookOb',Helvetica,sans-serif;
    line-height:18px;
    font-size:11pt;
    margin-right:10px;
}
4

1 回答 1

1

我唯一一次看到你打电话Validate是在这里：

$('input.id').on('keyup', function(){
    //code
});

和这里

$('input.id').keydown(function(e){
    //code
});

这意味着问题是event handler is not delegated to a static element

$(document).on('keyup', 'input.id', function(){
    //code
});

$(document).on('keydown', 'input.id', function(){
    //code
});

将它绑定到文档将确保任何动态创建的元素都将具有与同一选择器的任何静态元素相同的事件委托给它们。

最后一部分忘记了。

clonedObj.find('.id').each(function(){
   this.id='id' + idinc++;
   this.value = ''; //simply add this to remove the value
});

虽然，因为您使用的是 jQuery，所以您应该尽量坚持使用 jQuery。

clonedObj.find('.id').each(function(){
     $(this).prop('id', 'id'+ idinc++).val(''); // chain the commands
});
于 2012-12-12T07:29:12.090 回答