Làm cách nào để thực hiện vấn đề nhập mặt nạ sau?

Question

tôi đang có một kịch bản để che dấu một textbox, ở đây nó nó

<script src="http://jquery-joshbush.googlecode.com/ 
files/jquery.maskedinput-1.2.2.min.js" type="text/javascript"></script> 
<script type="text/javascript"> 
jQuery(function($) { 

     $('#j').mask('99:99'); 
     }); 
</script> 

tôi cũng đang gặp một kịch bản để tự động thêm hộp văn bản trong khi tôi bấm một nút

<script type="text/javascript"> 
    function addRow(tableID) { 

       var table = document.getElementById(tableID); 

       var rowCount = table.rows.length; 
       var row = table.insertRow(rowCount); 

       var colCount = table.rows[0].cells.length; 

       for(var i=0; i<colCount; i++) { 

        var newcell = row.insertCell(i); 

        newcell.innerHTML = table.rows[0].cells[i].innerHTML; 
        //alert(newcell.childNodes); 
        switch(newcell.childNodes[0].type) { 
         case "text": 
           newcell.childNodes[0].value = ""; 
           newcell.childNodes[0].id="j"; 
           alert(newcell.childNodes[0].id); 
           break; 
         case "checkbox": 
           newcell.childNodes[0].checked = false; 
           break; 
         case "select-one": 
           newcell.childNodes[0].selectedIndex = 0; 
           break; 
        } 
       } 
      } 

      function deleteRow(tableID) { 
       try { 
       var table = document.getElementById(tableID); 
       var rowCount = table.rows.length; 

       for(var i=0; i<rowCount; i++) { 
        var row = table.rows[i]; 
        var chkbox = row.cells[0].childNodes[0]; 
        if(null != chkbox &amp;&amp; true == chkbox.checked) { 
         if(rowCount <= 1) { 
          alert("Cannot delete all the rows."); 
          break; 
         } 
         table.deleteRow(i); 
         rowCount--; 
         i--; 
        } 


       } 
       }catch(e) { 
        alert(e); 
       } 
      } 
    </script> 

và hộp đầu vào của tôi là

<INPUT type="text" name="STime[]" id="j"/> 

<INPUT type="text" name="ETime[]" id="j"/>

vấn đề tôi đang phải đối mặt với hiện nay là, hộp văn bản đầu tiên sẽ có một đeo mặt nạ cấu trúc, nhưng sau khi tôi thêm một hộp văn bản động với sự giúp đỡ của kịch bản j, tôi sẽ không nhận được hộp văn bản như đeo mặt nạ? tôi đã làm sai điều gì?

Answer 1

Sử dụng livequery plug-in. Sau đó cung cấp tất cả các yếu tố bạn muốn che mặt cho lớp maskme. Bây giờ bạn có thể làm:

$(".maskme").livequery(function(){ 
    $(this).mask('99:99'); 
}); 

Điều này sẽ che dấu đầu vào được thêm ngay cả sau khi mã được chạy lần đầu.

Answer 2

Trình cắm thêm mặt nạ không ràng buộc trực tiếp với các phần tử mới trong DOM, mà là ràng buộc với phần tử tồn tại từ bộ chọn $ ('# j') của bạn.

1. Sử dụng một lớp thay vì một ID (vì bạn không thể hợp pháp có hai yếu tố với id cùng trên trang), và
2. Nếu cần thiết, lại gọi .mask() trên các yếu tố tạo động cho bạn sau khi thêm vào DOM.

Answer 3

Đầu tiên Dont sử dụng ID trên đầu vào

<input type="text" name="STime[]" class="jClass"/> 

Thứ hai nếu bạn sử dụng jQuery sau đó sử dụng nó. Điều này dễ đọc hơn nhiều.

<script type="text/javascript"> 
    function addRow(tableID) { 
     var table = $("#" + tableID); //get the table 
     var firstRowClone = $("tr:first", table).clone(); //clone the first row 
     $("input:checkbox",firstRowClone).attr("checked", false); // set all checkboxes to unchecked 
     $("select", firstRowClone).each(function() { //Set all select lists to select first item 
     this.selectedIndex = 0; 
     } 
     table.append(firstRowClone); //append the cloned row to the table. 
     $("input:text", firstRowClone).val("").mask("99:99"); //set all input type="text" with value of "" and sets the mask on the clone. 

    }); 

    function deleteRow(tableID) { 
     $("#" + tableId + " tr:not(:eq(0))").remove(); //Remove all rows except the first row.   
    } 


    $(document).ready(function { 
     $('.jClass').mask('99:99'); //sets the mask on any rows loaded initially 
    }); 

</script> 

Answer 4

Tạo sự kiện ràng buộc với đầu vào với lớp học (không sử dụng ID nếu bạn không phải) bạn đang nhắm mục tiêu. Sử dụng jQuery .Trên phương pháp http://api.jquery.com/on/

Ví dụ:

<input class="classSelector" /> 

<script> 
    $(document).on("focus", "classSelector", function() { 
    $(this).mask("99:99"); 
    }); 
</script> 

Bạn có thể tự động tạo bao nhiêu trong những đầu vào mà bạn muốn và mặt nạ họ bằng cách sử dụng về sự kiện ràng buộc. Mỗi đầu vào mới với lớp mà bạn tạo sẽ nhận được trình xử lý sự kiện đó gắn liền với nó.