TabIndex-нажатие tab перемещает меня в адресную строку - невозможно обойти это с помощью индексов Focus или + tab

Я прочитал несколько потоков, которые говорят о том, как адресная строка в IE в основном первая, чтобы получить Фокус при использовании TAB (собственные документы MSDN говорят об этом).

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

У меня есть главная страница, и внутри моей области содержимого находится formView.

по умолчанию он вставляет представление и никогда не может его оставить (они могут только вставлять не редактировать, а чтение обрабатывается в другом месте)

так далее моя загрузка страницы для страницы у меня есть:

Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Load
        If fvwLogEntry.CurrentMode = FormViewMode.Insert = True Then
            'Set the default field to position the cursor there...hopefully
            Dim FCtxtHrEmployeeId As TextBox
            FCtxtHrEmployeeId = CType(fvwLogEntry.FindControl("txtHrEmployeeId"), TextBox)
            Page.SetFocus(FCtxtHrEmployeeId.ClientID.ToString)
        End If

теперь, когда страница загружается, она устанавливает курсор в текстовое поле employeeID внутри шаблона вставки formview.

однако, когда я нажму TAB, он приведет меня к адресной строке, а затем, если я снова нажму tab, он проведет меня через остальные элементы на странице.

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

только когда страница загружается и получает фокус, установленный на текстовое поле employeeID, нажатие tab перемещает его в адресную строку.

Я также попытался установить другие элементы управления -1(те, которые я не хотел вкладывать), все равно не повезло.

Так... что я могу сделать, чтобы обойти это?

должен быть простой способ установить фокус на текстовое поле employeeID и убедиться, что нажатие TAB после этого переходит к следующему элементу управления в шаблоне вставки formview и не переходит в адресную строку?

7
tabs

9 ответов

я столкнулся с аналогичной проблемой в IE. После некоторого анализа я обнаружил, что эта проблема возникает, если есть какой-либо HTML-контент вне формы. например:

<html>
 <div id="1">
 </div>
 <form>
//other code
 </from>
</html>

это сработало для меня, после того, как я переместил весь HTML внутри тега формы.

<html>    
 <form>
 <div id="1">
 </div>
//other code
 </from>
</html>
2

Я нашел другой лучший вариант, который является самым быстрым из того, что я пробовал. Вот код

function handleTabOrder() {
    $('.myClass :visible:input:enabled').each(function (index) {
        $(this).attr('tabindex', index + 10);
    });

    $('.myClass :visible:input:enabled:first').keydown(function (e) {
        if (e.keyCode == 9 || e.which == 9) {
            $("[tabindex=10]").focus();
        }
    });
}

то, что я сделал здесь, чтобы присвоить вкладку для всех видимых элементов управления на странице, затем я обработал ключ вниз событие только первый контроль(что переносит управление в адресной строке) и теперь он перекладывает контроль на следующий видимого элемента на экране..

Это просто работа, но работает быстрее, чем любые другие вещи, упомянутые в нитка.

просто напишите вышеуказанную функцию и все это в событии on-load страницы.

2

У меня тоже была эта проблема. Для меня это было вызвано использованием .выберите () метод, чтобы автоматически фокусироваться на текстовом поле, как только страница загружена. Я изменил свой код, чтобы вместо этого использовать jQuery .метод focus () и это решило проблему.

2

посмотрите на:http://www.w3schools.com/tags/att_global_tabindex.asp

ваш элемент txtHrEmployeeId должен иметь tabindex 1, а все остальные элементы должны иметь более высокие значения. -1 не является допустимым

также убедитесь, что tabindex верны в html, который получает визуализацию (щелкните правой кнопкой мыши на странице и "просмотреть источник").

1

следующий код jquery, кажется, работает нормально для меня.. 

$(window).load(function () {
    $('.myClass :visible:input:enabled:first').focus();
});

$('body').on('keydown', '.myClass :visible:input:enabled:first', function (e) {
    if ((e.which == 9) || (e.keyCode == 9)) {
        $('.myClass :visible:input:enabled:first').focus();
    }
});
1

Я понимаю, что это старый пост, но еще более простой метод-добавить атрибут "tab-stop" к элементу формы с последним tabindex. Затем свяжите прослушиватель keydown и принудительно сфокусируйтесь на первом tabindex при обнаружении tab-stop.

вот простой пример:

<input type="text" tab-stop />

$document.bind("keydown", function(event) {
    var attrs = event.currentTarget.activeElement.attributes;

    if (attrs['tab-stop']) {
        angular.element.find('select')[0].focus();
            event.preventDefault();
        }
    });
};
1

ответ, упомянутый в моем другом посте, отлично работает, но он сделал страницу огромной производительности, потому что с каждым нажатием клавиши на странице весь DOM искал элементы. Поэтому я нашел новое, более оптимизированное решение

var myNameSpace = function(){

this.selector = '.myClass :visible:input:enabled:first';

this.myElement = $(selector);

this._body = $('body');
var _self= this;

this._body.on('keydown',_self.selector,function(e){
     if ((e.which == 9) || (e.keyCode == 9)) {
        _self.myElement.focus();
     }
   });
};

общая идея заключается в том, чтобы "кэшировать" узел для доступа. Нет необходимости пересекать DOM снова и снова для простого выбора.

0

У меня была такая же проблема. Оказывается, мой был связан с модальными всплывающими расширителями ajax. показывалось модальное всплывающее окно, хотя технически я не мог его видеть, потому что оно было завернуто в родительский div, который был скрыт. если вы используете модальные расширители всплывающих окон, это может вызвать такую проблему.

0

Если вы используете JSF или Primefaces, вы можете использовать:

<p:focus for"formname"></p:focus>
0