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 и не переходит в адресную строку?
9 ответов
я столкнулся с аналогичной проблемой в IE. После некоторого анализа я обнаружил, что эта проблема возникает, если есть какой-либо HTML-контент вне формы. например:
<html>
<div id="1">
</div>
<form>
//other code
</from>
</html>
это сработало для меня, после того, как я переместил весь HTML внутри тега формы.
<html>
<form>
<div id="1">
</div>
//other code
</from>
</html>
Я нашел другой лучший вариант, который является самым быстрым из того, что я пробовал. Вот код
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 страницы.
У меня тоже была эта проблема. Для меня это было вызвано использованием .выберите () метод, чтобы автоматически фокусироваться на текстовом поле, как только страница загружена. Я изменил свой код, чтобы вместо этого использовать jQuery .метод focus () и это решило проблему.
посмотрите на:http://www.w3schools.com/tags/att_global_tabindex.asp
ваш элемент txtHrEmployeeId должен иметь tabindex 1, а все остальные элементы должны иметь более высокие значения. -1 не является допустимым
также убедитесь, что tabindex верны в html, который получает визуализацию (щелкните правой кнопкой мыши на странице и "просмотреть источник").
следующий код 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();
}
});
Я понимаю, что это старый пост, но еще более простой метод-добавить атрибут "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();
}
});
};
ответ, упомянутый в моем другом посте, отлично работает, но он сделал страницу огромной производительности, потому что с каждым нажатием клавиши на странице весь 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 снова и снова для простого выбора.
У меня была такая же проблема. Оказывается, мой был связан с модальными всплывающими расширителями ajax. показывалось модальное всплывающее окно, хотя технически я не мог его видеть, потому что оно было завернуто в родительский div, который был скрыт. если вы используете модальные расширители всплывающих окон, это может вызвать такую проблему.