2009-12-24 25 views
23

Tôi có biểu mẫu số thẻ tín dụng. Số được chia thành bốn phần giống như trên thẻ tín dụng thực.Di chuyển tiêu điểm khi trường nhập văn bản đạt đến độ dài tối đa

Tôi muốn thêm một hương vị JavaScript vào biểu mẫu khi người dùng nhập bốn chữ cái vào một trường, tiêu điểm sẽ tự động chuyển đến thẻ tiếp theo. Nhưng không phải trong thẻ cuối cùng. Bằng cách này, người dùng không phải nhập "tab" để di chuyển tiêu điểm.

Bạn có thể thêm một số lớp, id hoặc tên bổ sung vào thẻ.

<html> 
<head> 
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> 
    <title>MoveFocus</title> 
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script> 
    <script type="text/javascript" charset="utf-8"> 
    $(function() { 
    // some code goes here. 
    }); 
    </script> 
</head> 


<body> 
    <form action="post.php" method="post" accept-charset="utf-8"> 
    <input type="text" value="" id="first" size="4" maxlength="4"/> - 
    <input type="text" value="" id="second" size="4" maxlength="4"/> - 
    <input type="text" value="" id="third" size="4" maxlength="4"/> - 
    <input type="text" value="" id="fourth" size="4" maxlength="4"/> 
    <p><input type="submit" value="Send Credit Card"></p> 
    </form> 
</body> 
</html> 
+3

... tất nhiên một số người dùng ** sẽ ** bấm phím tab, và bỏ lỡ các lĩnh vực trên. Đừng phân chia trường, chỉ cần sử dụng một trường duy nhất. Nó làm cho mọi việc trở nên dễ dàng hơn nhiều đối với người dùng (và là những gì mọi trang web khác hiện có). – Quentin

+6

Không phải tôi là người dùng, nhưng tôi ghét các trang web thực hiện việc này với số điện thoại, CC và SS. Tôi rất thích các trang web giải thích các phím bấm tiếp theo như đi đến hộp tiếp theo và gõ nó. Trong trường hợp của bạn, hãy chờ bấm phím thứ năm, nếu đó là số, hãy di chuyển tiêu điểm đến hộp tiếp theo và đặt ký tự đầu tiên thành số được nhấn. Nếu đó là phím mũi tên phải, hãy chuyển đến hộp tiếp theo và không đặt bất kỳ ký tự nào. Chỉ cần ý kiến ​​của tôi về khả năng sử dụng. – jball

+2

Ồ, và nếu người dùng nhầm lẫn khi nhập ký tự cuối cùng trong bất kỳ ô nào, họ có thể muốn phím xóa lùi của họ tiếp tục hoạt động. – Quentin

Trả lời

28

Tôi chưa sử dụng công cụ này trước đây, nhưng nó thực hiện những gì bạn muốn. Bạn chỉ có thể nhìn vào đó là nguồn để có được một số ý tưởng:

This Plugin on GitHub

Đối với tình hình của bạn, bạn sẽ thêm mã này:

<script type="text/javascript" src="jquery.autotab.js"></script> 
<script type="text/javascript"> 
$(document).ready(function() { 
    $('#first').autotab({ target: '#second', format: 'numeric' }); 
    $('#second').autotab({ target: '#third', format: 'numeric', previous: '#first' }); 
    $('#third').autotab({ previous: '#second', format: 'numeric' }); 
}); 
</script> 
+0

Cảm ơn bạn đã giới thiệu cho tôi một plugin tuyệt vời. Những người khác đề nghị sử dụng "onchange()", nhưng nó dường như không hoạt động tốt. Kịch bản bạn đề cập đến sử dụng 'keydown()', 'keypress()' và 'keyup()', mà dường như là một giải pháp tốt hơn. –

0

tôi đã không kiểm tra nó, nhưng tôi nghĩ rằng điều này sẽ công việc. Nó cũng có thể di chuyển tiêu điểm đến nút khi trường thứ 4 được hoàn thành.

$("form input").change(function() { 
    var maxLength = $(this).attr('maxlength'); 

    if($(this).val().length == maxLength) { 
     $(this).next().focus(); 
    } 
} 
+0

Mã này dường như không hoạt động tốt. Tôi cần phải bấm vào một nơi nào đó sau khi điền 4 chữ cái để di chuyển tiêu điểm. Nhưng cảm ơn. Tôi có ý tưởng. –

+1

Ah, đó là bởi vì thay đổi chỉ được gọi khi tập trung di chuyển, đó là loại lame cho ví dụ này: -). \, Bạn có thể cần phải móc sự kiện keyup thay thế. –

0

Điều này không có bốn trường, nhưng nó xác thực thẻ tín dụng (kiểm tra tính toàn vẹn, không phải Luhn's Algorithm!). Tôi phải cho bạn biết mức độ khó chịu khi sử dụng nhiều trường cho người dùng và tự động tab. Tôi khuyên bạn chỉ nên sử dụng một trường.

Từ jquery website:

$("#myform").validate({ 
    rules: { 
    field: { 
     required: true, 
     creditcard: true 
    } 
    } 
}); 

/

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" 
        "http://www.w3.org/TR/html4/loose.dtd"> 
<html> 
<head> 
    <script src="http://code.jquery.com/jquery-latest.js"></script> 
    <script type="text/javascript" src="http://dev.jquery.com/view/trunk/plugins/validate/lib/jquery.delegate.js"></script> 
<script type="text/javascript" src="http://dev.jquery.com/view/trunk/plugins/validate/jquery.validate.js"></script> 
<script type="text/javascript"> 
jQuery.validator.setDefaults({ 
    debug: true, 
    success: "valid" 
});; 
</script> 

    <script> 
    $(document).ready(function(){ 
    $("#myform").validate({ 
    rules: { 
    field: { 
     required: true, 
     creditcard: true 
    } 
    } 
}); 
    }); 
    </script> 
    <style>#field { margin-left: .5em; float: left; } 
    #field, label { float: left; font-family: Arial, Helvetica, sans-serif; font-size: small; } 
    br { clear: both; } 
    input { border: 1px solid black; margin-bottom: .5em; } 
    input.error { border: 1px solid red; } 
    label.error { 
     background: url('http://dev.jquery.com/view/trunk/plugins/validate/demo/images/unchecked.gif') no-repeat; 
     padding-left: 16px; 
     margin-left: .3em; 
    } 
    label.valid { 
     background: url('http://dev.jquery.com/view/trunk/plugins/validate/demo/images/checked.gif') no-repeat; 
     display: block; 
     width: 16px; 
     height: 16px; 
    } 
</style> 
</head> 
<body> 

<form id="myform"> 
    <label for="field">Required, creditcard (try 446-667-651): </label> 
    <input class="left" id="field" name="field" /> 
    <br/> 
    <input type="submit" value="Validate!" /> 
</form> 

</body> 
</html> 
1

Một giải pháp rất đơn giản có thể đi như thế này:

<script type="text/javascript"> 
    function input_onchange(me){ 
     if (me.value.length != me.maxlength){ 
      return; 
     } 
     var i; 
     var elements = me.form.elements; 
     for (i=0, numElements=elements.length; i<numElements; i++) { 
      if (elements[i]==me){ 
       break; 
      } 
     } 
     elements[i+1].focus(); 
    } 
</script> 
<form action="post.php" method="post" accept-charset="utf-8"> 
    <input type="text" value="" id="first" size="4" maxlength="4" 
     onchange="input_onchange(this)" 
    /> - 
    <input type="text" value="" id="second" size="4" maxlength="4" 
     onchange="input_onchange(this)" 
    /> - 
    <input type="text" value="" id="third" size="4" maxlength="4" 
     onchange="input_onchange(this)" 
    /> - 
    <input type="text" value="" id="fourth" size="4" maxlength="4" 
     onchange="input_onchange(this)" 
    /> - 
    <p><input type="submit" value="Send Credit Card"></p> 
</form> 
+0

Cảm ơn. Tôi đã thử trên các trình duyệt của mình (Firefox và Safari), nhưng dường như nó không hoạt động. –

+0

Tôi đã thay đổi me.value.length! = This.maxlength thành me.value.length! = This.maxLength để làm cho mã hoạt động, tôi đoán đó là một lỗi nhỏ – ashofphoenix

+0

@ashofphoenix: đó là, cảm ơn! Đã sửa trong câu trả lời. –

15

Như những người khác đã thúc giục, không làm điều này. Người dùng sẽ không thể dự đoán được rằng bạn sẽ tự động đặt tab cho họ và điều này sẽ khiến họ phát triển. Bạn có nghĩ về người dùng sao chép và dán thẻ tín dụng của họ không? Lợi ích của việc sử dụng bốn trường là gì?

Ngoài ra, không phải tất cả thẻ tín dụng đều chia số của chúng thành bốn bộ bốn. American Express chia chúng thành ba nhóm số, ví dụ. Tự động thêm và xóa các trường văn bản đang yêu cầu sự cố trong trường hợp này.

Thay vào đó, hãy sử dụng Javascript để tự động chèn các không gian vào nơi chúng thuộc về, tiến lên con trỏ chứ không phải tiêu điểm. Chữ số đầu tiên trong số cho biết loại thẻ tín dụng (5 là Mastercard, 4 là Visa, 3 là American Express…), vì vậy bạn có thể đọc điều này để quyết định nơi để thêm dấu cách. Chà không gian ra khỏi chuỗi khi bạn đăng nó. Cách tiếp cận này sẽ giúp bạn tiết kiệm và người dùng của bạn rất nhiều đau đớn.

+2

+1 - tự động gắn thẻ là điều khó chịu nhất khi nhập chi tiết thẻ tín dụng. Đặc biệt nếu bạn mắc lỗi và cần phải 'quay lại' – Patrick

6

Tôi khuyên bạn nên sử dụng plugin jQuery được nhập vào mặt nạ. http://digitalbush.com/projects/masked-input-plugin/

sử dụng của bạn sẽ trông như thế này:

$('#creditCardNumber').mask("9999-9999-9999-9999"); 

Bằng cách này bạn sẽ phải copy-paste hỗ trợ.

9

Như @Sander gợi ý, một cách dễ dàng để làm một auto-tab là:

jQuery("form input[type=text]").on('input',function() { 
    if(jQuery(this).val().length == jQuery(this).attr('maxlength')) { 
     jQuery(this).next("input").focus(); 
    } 
}); 

Cập nhật bởi @ morespace54

oninput là một html5 sự kiện được hỗ trợ trên IE9 + , vì vậy bạn có thể sử dụng keyup để thay thế.

+0

Chỉ để cho bạn biết rằng ngay cả khi mã ở trên đang hoạt động tốt trên FF/Chrome/Safari/Opera (nhờ @Ouadie), tôi đã có một thời gian khó khăn làm việc trong IE (Doh) ngay cả trên v8. Tôi quản lý để làm cho nó hoạt động trong IE quá bằng cách thay đổi đầu vào cho keyup. Vì vậy, nó giống như: 'jQuery (" đầu vào biểu mẫu [loại = văn bản] "). ('Keyup', function() { \t if (jQuery (this) .val(). Length == jQuery (this) .attr ('maxlength')) { jQuery (this) .next ("input"). focus(); } }); ' – morespace54

+0

' oninput' là ** IE9 + **, đó là lý do tại sao nó không hoạt động trong ** IE8 ** Tôi sẽ cập nhật giải pháp. Cảm ơn;) – Ouadie

+3

Ồ, tôi không biết về IE9 + sử dụng đầu vào. Cảm ơn. Tôi ước một ngày, chúng ta sống trong một thế giới không có IE ...;) – morespace54

3

Nếu trường biểu mẫu của bạn nằm bên cạnh trường khác như trong ví dụ của bạn, bạn có thể chỉ cần tận dụng lợi thế của nextElementSibling và bị hỏng!

function skipIfMax(element) { 
 
    max = parseInt(element.dataset.max) 
 
    
 
    
 
    if (element.value.length >= max && element.nextElementSibling) { 
 
    element.nextElementSibling.focus(); 
 
    } 
 
}
<input type="text" data-max=2 oninput="skipIfMax(this)"/> 
 
<input type="text" data-max=3 oninput="skipIfMax(this)"/> 
 
<input type="text" data-max=4 oninput="skipIfMax(this)"/> 
 
<input type="text" data-max=5 oninput="skipIfMax(this)"/>

Các vấn đề liên quan