10

我阅读了几个主题，这些主题讨论了 IE 中的地址栏基本上是第一个在使用 TAB 时获得焦点的主题（MSDN 自己的文档对此进行了讨论）。

然而，我看到情况并非总是如此......

我有一个母版页，在我的内容区域内是一个 formView。

它默认为 INSERT 视图并且永远不能离开它（他们只能插入而不是编辑，阅读在其他地方处理）

因此，在我的页面加载时，我拥有：

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

现在可以了，当页面加载时，它会将光标设置到 formview 的 INSERT 模板内的employeeID 文本框。

但是，当我点击 TAB 时，它会将我带到地址栏，然后如果我再次点击标签，它将带我浏览页面上的其余项目。

我将第一项的选项卡索引设置为 11，然后从那里增加（我读过 IE 的工具栏也有选项卡索引，所以我认为也许使用更高的数字会绕过这些，但同样这并不真正有意义，因为它仍然会从最低的数字开始，但我试了一下，认为它会从焦点所在的位置向前移动。）如果我单击文本框，然后按 TAB，它确实会像我预期的那样在页面中移动。

只是当页面加载并将焦点设置到employeeID 文本框时，点击选项卡会将其移动到地址栏。

我还尝试将其他控件设置为 -1（我不希望它使用标签的那些），但那里仍然没有运气。

那么......我该怎么做才能解决这个问题？

必须有一种简单的方法将焦点设置到employeeID 文本框，并确保在此之后按TAB 键移动到formview 的插入模板中的下一个控件并且不会跳到地址栏？

4

9 回答 9

2

下面的 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();
    }
});
于 2013-08-22T04:43:44.243 回答
2

我在 IE 中遇到了类似的问题。经过一些分析我发现，如果表单之外有任何HTML内容，就会出现这个问题。例如：

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

在我将所有 HTML 移入表单标签后，它对我有用。

<html>    
 <form>
 <div id="1">
 </div>
//other code
 </form>
</html>
于 2013-09-14T15:50:11.303 回答
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();
        }
    });
}

What I have done here is to assign Tab order to all the visible controls on the page, then I have handled the key down event of only first control(that shifts the control to address bar) and now it shifts the control to next visible input item on the screen..

Its just a work around but works faster than any of the other things mentioned in the thread.

Just write the above function and all it in on-load event of page.

于 2014-04-22T09:55:42.223 回答
2

I was having this issue as well. For me, it was being caused by the use of the .select() method in order to bring focus automatically on a text field as soon as the page loaded. I changed my code to instead use JQuery's .focus() method and that resolved the issue.

于 2016-02-09T17:29:13.457 回答
1

看看：http ://www.w3schools.com/tags/att_global_tabindex.asp

您的 txtHrEmployeeId 元素应该有 tabindex 1 并且所有其他元素应该有更高的值。-1 无效

还要验证在呈现的 html 中的 tabindex 是否正确（右键单击页面和“查看源代码”）。

于 2013-08-21T14:07:10.567 回答
1

I realize this is an old post, but an even simpler method is to add a "tab-stop" attribute to the form element with the last tabindex. Then bind a keydown listener and force focus to the first tabindex when the tab-stop is encountered.

Here's a simple example:

<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();
        }
    });
};
于 2016-03-11T17:55:19.943 回答
0

我在另一篇文章中提到的答案工作正常，但它使页面的性能受到了巨大的影响，因为页面上的每一次按键都会搜索整个 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。

于 2013-08-26T09:18:27.417 回答
0

我有同样的问题。事实证明，我的与 ajax 模态弹出扩展器有关。正在显示一个模式弹出窗口，尽管从技术上讲我看不到它，因为它被包裹在隐藏的父 div 中。如果您使用的是模态弹出扩展器，这可能会导致这样的问题。

于 2014-04-07T13:36:51.593 回答
0

If you are using JSF or Primefaces, you can make use of:

<p:focus for"formname"></p:focus>
于 2017-05-22T09:43:10.023 回答