Динамическое изменение индекса вкладки для текстового поля

У меня есть требование выполнить изменение индекса вкладок курсора на основе того, как пользователь хочет выполнить. Я не уверен, что это лучший способ достичь этого. Я создал скрипку, чтобы понять, что объясняется здесь, понимается всеми.Динамическое изменение индекса вкладки для текстового поля

Требование заключается в следующем:

Существует таблица с рядом текстовое поле на всех строках и столбцах.
Под таблицей предоставляется радиокнопка, позволяющая пользователю перемещаться по текстовым полям на столе.
Выбор «Переместить по горизонтали» заставит курсор перемещаться из каждого текстового поля горизонтально при нажатии вкладки или максимальной длины.
Выбор «Переместить по вертикали» заставит курсор перемещаться из каждого текстового поля вертикально при нажатии вкладки или максимальной длины.
По умолчанию индексы вкладок перемещаются по вертикали.
При достижении последнего текстового поля в строке в столбце курсор должен автоматически перейти к следующей строке или столбцу с первым текстовым полем.

Как добиться этого динамически при выборе переключателей.

JS Fiddle: http://jsfiddle.net/2uzfT/4/embedded/result/

источник

2012-03-15 Abishek R Srikaanth

Ваше полное решение :)

HTML

<table border="1" id="mytable"> 
    <thead> 
    <tr> 
     <th> Description </th> 
     <th> Column1 </th> 
     <th> Column2 </th> 
     <th> Column3 </th> 
    </tr> 
    </thead> 
    <tbody> 
    <tr> 
     <td> Stephen </td> 
     <td><input type="text"> 
     </td> 
     <td><input type="text"> 
     </td> 
     <td><input type="text"> 
     </td> 
    </tr> 
    <tr> 
     <td> Malcom </td> 
     <td><input type="text"> 
     </td> 
     <td><input type="text"> 
     </td> 
     <td><input type="text"> 
     </td> 
    </tr> 
    <tr> 
     <td> Judith </td> 
     <td><input type="text"> 
     </td> 
     <td><input type="text"> 
     </td> 
     <td><input type="text"> 
     </td> 
    </tr> 
    </tbody> 
</table> 
<br> 
<br> 
<INPUT TYPE=RADIO NAME="selection" VALUE="V"> 
Move Verically<BR> 
<INPUT TYPE=RADIO NAME="selection" VALUE="H"> 
Move Horizontally<BR>

JQuery

$(function() { 
    var inputBox = $('#mytable input[type="text"]').length; 
    var row = $('#mytable tbody tr').length; 
    var column = $('#mytable tbody tr:first td').length; 

    // Vertical 
    $('input:radio').change(function() { 
     var self = $(this); 

     if(self.val() == "V") { 
      var counter = 1; 
      for(i=1; i<column; i++) { 
       for(j=2; j<=row+1; j++) { 
        $('#mytable tbody tr td:nth-child('+j+')').find('input[type="text"]').attr('tabindex', counter); 
        counter++; 
       } 
      } 
     } 

     else { 
      $('#mytable input[type="text"]').removeAttr('tabindex'); 
     } 
    }); 
});

источник

2012-03-15 07:06:42 Tarun

Я сделал очень похожее решение, чтобы посмотреть, если бы я мог. Я столкнулся с проблемой - и похоже, что у вас тоже есть - где запрос фокуса отправляется переключателю при изменении, независимо. Если вы попытаетесь остановить запрос фокуса от отправки к переключателю, он не сможет инициировать событие, потому что изменение никогда не выполняется (я предполагаю, что это отказоустойчиво). Моя единственная мысль и решение заключалась в том, чтобы зафиксировать текущий индекс ввода (до запроса на изменение) и переориентироваться на этот индекс после функции изменения (в то же время обновляя переменную, содержащую значение индекса). Мысли? – Ohgodwhy

В этом случае вы можете применить его в событии клика переключателя каждый раз, когда нужно проверить, верно это или нет. – Tarun

@Tarun Nice один .. – Gopesh

Грубая идея ниже по JQuery:

// For columns 
    var textBoxes = $('#tableid input[type="textbox"]').length; 
    var rowNums = 4; 

    for(i=0; i<=textBoxes; i++) { 
    for(j=0; j<=rowNums; j++) { 
     $('#tableid').find('tr:eq('+j+') input[type="textbox"]').attr('tabindex', i); 
    } 
    }

Роу индексация может быть сделано так же, как и выше

источник

2012-03-15 06:32:39 Tarun

Динамическое изменение индекса вкладки для текстового поля

ответ

Смежные вопросы