2015-11-27 5 views
0

Я установил индексы табуляции на всех элементах моей страницы JSP, которая работает нормально, но в вкладке указатели потока также активируются.Как удалить функции браузера из потока tabindex?

Пример: Когда фокус вкладки находится на последнем элементе моей страницы, и если я снова нажму на табуляцию, тогда фокус перейдет в адресную строку браузера, кнопку обновления, окно вкладок и кнопку «домой».

Я хочу, чтобы основное внимание должно быть на первом элементе, который, имеющий вкладку индекс 1 после последнего индекса вкладки, которая 10.

Как я могу ограничить эти браузеры функции на вкладке фокусировки. Я использую JavaScript/JQuery и IE 9.

Ниже моя страница:

<html> 
    <body> 
     <script src="jquery.js"></script> 
     <script type="text/javascript"> 
      $(document).ready(function() { 
       //functions 
      }); 
     </script> 
     <div id="xyz"> 
      <ul > 
       <li> 
        <div> 
         <input type="text" maxlength="30" tabindex = "1" /> 
         <br> 
         <input type="text" maxlength="30" tabindex = "2" /> 
         <br> 
        </div> 
       </li> 
      </ul> 
      <ul> 
       <li> 
        <div> 
         <input type="checkbox" id="checkBox1" value="false" tabindex ="3"/> 
        </div> 
        <div> 
         <input type="checkbox" id="checkBox2" value="false" tabindex ="4"/> 
        </div> 
       </li> 
       <li> 
        <div> 
         <input type="button" name="saveBtn" id="saveBtn" value="SaveMe" tabindex ="5"/> 
        </div> 
        <div> 
         <input type="button" name="clearBtn" id="clearBtn" value="ClearMe" tabindex ="6"/> 
        </div> 
       </li> 
      </ul> 
     </div> 
    </body> 
</html> 
+0

Это зависит от структуры разметки. – Jai

+0

присоединить событие 'blur' к вашему последнему элементу формы и в этом установить фокус на ваш первый/необходимый элемент формы. Я уверен, что это сработает. – vijayP

ответ

2

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

<input id="firstElement" value="" /> 
<!---series of dom element--> 
<input id="lastElement" value="" /> 
<script> 
    $('#lastElement').keydown(function(e) { 
     if (e.keyCode == 9) { 
      $('#firstElement').focus(); 
      e.preventDefault(); 
     } 
    }); 

</script> 
+0

спасибо, это самое простое решение. :) –

1

Вы можете использовать keydown событие в сочетании с .index() и .length проверки:

$('#xyz').find(':input').last().keydown(function(e) { 
 
    if ($(this).attr('tabindex') == $('#xyz').find(':input').length) { 
 
    if (e.keyCode === 9) { 
 
     e.preventDefault(); 
 
     $('input[type="text"]').first().trigger('focus'); 
 
    } 
 
    } 
 
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div id="xyz"> 
 
    <ul> 
 
    <li> 
 
     <div> 
 
     <input type="text" maxlength="30" tabindex="1" /> 
 
     <br> 
 
     <input type="text" maxlength="30" tabindex="2" /> 
 
     <br> 
 
     </div> 
 
    </li> 
 
    </ul> 
 
    <ul> 
 
    <li> 
 
     <div> 
 
     <input type="checkbox" id="checkBox1" value="false" tabindex="3" /> 
 
     </div> 
 
     <div> 
 
     <input type="checkbox" id="checkBox2" value="false" tabindex="4" /> 
 
     </div> 
 
    </li> 
 
    <li> 
 
     <div> 
 
     <input type="button" name="saveBtn" id="saveBtn" value="SaveMe" tabindex="5" /> 
 
     </div> 
 
     <div> 
 
     <input type="button" name="clearBtn" id="clearBtn" value="ClearMe" tabindex="6" /> 
 
     </div> 
 
    </li> 
 
    </ul> 
 
</div>

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