Как установить порядок табуляции для html по горизонтали?

ProgramBox

Как установить порядок табуляции для html по горизонтали?

Post author:admin
Запись опубликована:25 февраля, 2023
Post category:Вопросы по программированию

#javascript #jquery #html #css #forms

#javascript #jquery #HTML #css #формы

Вопрос:

У меня есть множественная форма, содержит 2 поля ввода и кнопку отправки. я задал порядок табуляции для каждого ввода. у меня есть индекс табуляции для каждого типа ввода. порядок табуляции перемещается по вертикали, а не по горизонтали. он должен перейти в первое поле ввода, второе поле ввода, а затем кнопку отправки.

Ниже приведен код.

 <form class="monitorForm" >
  <div class="monitorAdd">
    textbox1  <input type="text" tabindex="1">
    textbox2  <input type="text" tabindex="2">
        <input type="button" tabindex="3" value="submit">
  </div>
</form>
<form class="monitorForm">
    <div class="monitorAdd">
        textbox1        <input type="text" tabindex="1">
        textbox2        <input type="text" tabindex="2">
        <input type="button" tabindex="3" value="submit">
    </div>
</form>
<form  class="monitorForm">
    <div class="monitorAdd">
          textbox1        <input type="text" tabindex="1">
          textbox2        <input type="text" tabindex="2">
         <input type="button" tabindex="3" value="submit">
    </div>
</form>

ниже приведен код js

 $('form').each(function(){

    var list  = $(this).find('*[tabindex]').sort(function(a,b){ return a.tabIndex <      b.tabIndex ? -1 : 1; }),
    first = list.first();
    list.last().on('keydown', function(e){
        if( e.keyCode === 9 ) {
            first.focus();
            return false;
         }
    });
});

это динамическая форма, которая запускается в цикле и содержит много полей. я хочу задать порядок табуляции только для 3 полей ввода.

http://jsfiddle.net/mWLtp/5/

Пожалуйста, помогите мне в решении этой проблемы. Заранее благодарю.

Ответ №1:

 set distinct tab index. for your case set it in 1 t0 9.


Like

<form class="monitorForm" >
 <div class="monitorAdd">
    textbox1        <input type="text" tabindex="1">
    textbox2        <input type="text" tabindex="2">
    <input type="button" tabindex="3" value="submit">
 </div>
</form>
<form class="monitorForm">
<div class="monitorAdd">
    textbox1        <input type="text" tabindex="4">
    textbox2        <input type="text" tabindex="5">
    <input type="button" tabindex="6" value="submit">
</div> 
</form>
<form  class="monitorForm">
<div class="monitorAdd">
      textbox1        <input type="text" tabindex="7">
      textbox2        <input type="text" tabindex="8">
     <input type="button" tabindex="9" value="submit">
 </div>
 </form>

Ответ №2:

jQuery Way ДЕМОНСТРАЦИЯ

 var index = 1;

$("form input").each(function () {
    $(this).attr("tabindex", index);
    index  ;
});

HTML WAY Ну, вы можете напрямую предоставить демонстрацию Tabindex

 <form class="monitorForm" >
    <div class="monitorAdd">
        textbox1        <input type="text" tabindex="1">
        textbox2        <input type="text" tabindex="2">
        <input type="button" tabindex="3" value="submit">
     </div>
</form>
<form class="monitorForm">
    <div class="monitorAdd">
        textbox1        <input type="text" tabindex="4">
        textbox2        <input type="text" tabindex="5">
        <input type="button" tabindex="6" value="submit">
    </div>
</form>
<form  class="monitorForm">
    <div class="monitorAdd">
          textbox1        <input type="text" tabindex="7">
          textbox2        <input type="text" tabindex="8">
         <input type="button" tabindex="9" value="submit">
    </div>
</form>

ну, если вы не определяете атрибут tabindex, который по умолчанию имеет значение horizontal, вам не нужны никакие tabindex или jquery

1. Спасибо. я думаю, я могу использовать jquery для добавления tabindex. потому что это динамическая форма, которая запускается в цикле и содержит много полей. я хочу задать порядок только для 3 полей ввода. поэтому я не могу указать индивидуальное значение индекса в HTML.

2. что делать, если требуется вертикальный индекс табуляции с помощью jquery?

Ответ №3:

Все tabindex=1 будут взяты в порядке сверху вниз, независимо от того, разместили ли вы их в одном <div> или разных. Затем наступит черед tabindex=2 .

Ваше решение:

Измените tabindex на 1,2,3,4,5,6 .. вместо 1,2,3,1,2,3,…

Надеюсь, это поможет. 🙂

Ответ №4:

Укажите индивидуальное значение tabindex вместо override вашего значения tabindex.

ДЕМОНСТРАЦИЯ JSFIDDLE