TabIndex ở dạng động (các yếu tố xuất hiện tùy theo từng trường hợp)

Tôi đã làm việc trên một số hình thức phức tạp hơn, nơi các trường được hiển thị tùy thuộc vào một số điều kiện của các giá trị được nhập trong biểu mẫu.TabIndex ở dạng động (các yếu tố xuất hiện tùy theo từng trường hợp)

Tuy nhiên, khi biểu mẫu được nhập thông qua phím <Tab> (<Tab> phím-> nhập giá trị-><Tab>), nó sẽ không đi đến trường mới xuất hiện, nhưng sẽ xuất hiện trước đó.

Sau đây là ví dụ đơn giản. Nếu bạn viết bất cứ thứ gì vào trường với số 1, khi sự kiện thay đổi được kích hoạt và đầu vào có giá trị 2 được hiển thị, nhưng không phải là giá trị tiếp theo được tập trung vào.

<head> 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script> 
</head> 
<form> 
    <input id="input1" value="1" tabindex="1" onchange="$('#input2').show()"> 
    <input id="input2" value="2" tabindex="2" style="display: none;"> 
    <input id="input3" value="3" tabindex="3" onchange="$('#input4').show()"> 
    <input id="input4" value="4" tabindex="4" style="display: none;"> 
    <input id="input5" value="5" tabindex="5"> 
    <input id="input6" value="6" tabindex="6"> 
</form>

Do tính phức tạp của nó, tôi không muốn kiểm soát trực tiếp khóa <Tab>. Hơn nữa, tôi không thể sử dụng onchange="$('#input2').show();$('#input2').focus()" vì cùng một mã được sử dụng cũng trong trường hợp khi nó không phải là phần tử tiếp theo ngay lập tức. Có cách nào để giải quyết vấn đề này không?

Cảm ơn trước vì bất kỳ nhận xét/đề xuất nào.

Nguồn

2012-01-25 Sale

Tôi gặp sự cố tương tự khi 'onchange' nằm trên' select' (trong trường hợp này FF là trình duyệt có vấn đề chính). Tôi giải quyết nó bằng cách 'bind'ing cùng một hành động để' keyup'. BTW: giữ JS của bạn ra khỏi HTML của bạn (hoặc có thể bạn trộn chúng chỉ cho ví dụ này?) –

click here for a working solution on jsFiddle.

tôi đã sử dụng phím bấm để thực hiện công việc này.

trong ví dụ này, bạn có thể chuyển tiếp và quay lại qua các trường văn bản 1, 3 và 5, sau đó thay đổi giá trị của trường văn bản 1 hiển thị trường văn bản 2; sau đó bạn có thể tab đến textfield 2, 3 và 5 - v.v.

tôi hy vọng tôi đã hiểu thử thách của bạn một cách chính xác và điều này hữu ích. cổ vũ.

<!DOCTYPE html> 
<html> 
<head> 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript"></script> 

    <script type="text/javascript"> 
     $(document).ready(function() { 
     $("input").live("keypress", function() { 
      $(this).next().show() 
     }) 
     }) 
    </script> 

    <style type="text/css"> 
     .hidden { 
     display:none; 
     } 
    </style> 
</head> 
<body> 
<form> 
    <input id="input1" value="1"> 
    <input id="input2" value="2" class="hidden"> 
    <input id="input3" value="3"> 
    <input id="input4" value="4" class="hidden"> 
    <input id="input5" value="5"> 
    <input id="input6" value="6" class="hidden"> 
</form> 
</body> 
</html>

Nguồn

2012-10-12 12:19:04

TabIndex ở dạng động (các yếu tố xuất hiện tùy theo từng trường hợp)

Trả lời

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