Question

好朋友， 我正在做一个小任务，即让用户在输入按键时对html元素进行tabindex。

作为jquery的新手，我已经编写了一些代码，在我看来它会起作用，但是它有一些问题。

初步调查结果
罪魁祸首代码，它不起作用，因为Msg lablel中的输出是“Undefined”

$('*').attr('tabindex').id

enter image description here

下面给出了代码，我甚至创建了JSFiddle。

JQuery的

 $(document).ready(function (eOuter) {
    $('input').bind('keypress', function (eInner) {
        if (eInner.keyCode == 13) //if its a enter key
        {
            var tabindex = $(this).attr('tabindex');
            tabindex++; //increment tabindex
            //after increment of tabindex ,make the next element focus
            $('*').attr('tabindex', tabindex).focus();

                       **//Msg Label**
            //Just to print some msgs to see everything is working
            $('#Msg').text( this.id + " tabindex: " + tabindex 
               + " next element: " + $('*').attr('tabindex').id);

            return false; // to cancel out Onenter page postback in asp.net
        }
    });
}
);

HTML

<div>
    Employee Info<br />
    Name<br />
    <input name="TxtbxName" type="text" value="ok" id="TxtbxName" tabindex="1" />
    <br />
    Age<br />
    <input name="TxtbxAge" type="text" id="TxtbxAge" tabindex="2" />
    <br />
    Gender<br />
    <select name="DdlGender" id="DdlGender" tabindex="3">
      <option selected="selected" value="Male">Male</option>
      <option value="Female">Female</option>
    </select>
    <br />
    <div>
        Previous Employment<br />
        <select name="DdlCompany" id="DdlCompany" tabindex="4">
   <option selected="selected" value="0">Folio3</option>
   <option value="1">Null Soft</option>
   <option value="2">Object Soft</option>
   <option value="3">Excepption Soft</option>
    </select>
        &nbsp;&nbsp;or Enter Code&nbsp;&nbsp;
        <input name="TxtbxCompanyCode" type="text" id="TxtbxCompanyCode" tabindex="5" />
        <br />
        Address<br />
        <input name="TxtbxAddress" type="text" id="TxtbxAddress" tabindex="6" />
        <br />
       <input type="submit" name="BtnSubmit" value="Submit" id="BtnSubmit" tabindex="7"/>
        <br />
        <label id="Msg">Message here</label>
    </div>
</div>

让我知道我哪里出错：/

Answer 1

我发现了一些小的jQuery问题。修复了这里：JSFiddle。

这一行：

$('*').attr('tabindex', tabindex).focus();

可以这样写：

$('[tabindex=' + tabindex + ']').focus();

和此：

$('#Msg').text($(this).id + " tabindex: " + tabindex 
           + " next element: " + $('*').attr('tabindex').id);

没有以jQuery的方式调用id属性（你使用的是JavaScript语法，但是$（this）的结果是一个jQuery对象。所以... $(this).id变为$(this).attr('id')。

表单仍有提交问题，我没有深入研究，但它改变焦点并填写'#Msg'元素。

Answer 2

以下是focusNextElement jQuery {{ 3}}基于以下 stackoverflow 答案创建：

JSFiddle example

How to prevent ENTER keypress to submit a web form?

keydown

Answer 3

不想发布新帖子并使用我觉得有用的解决方案制作垃圾邮件。

从其他来源收集信息（Brian Glaz code nice-one），并使用输入键制作使用标签索引关注下一个元素的跨浏览器版本。

制表符索引 不是一个接一个，但也可能包含（1,2,9,11,30等）之间的空格

var tabindex = 1; //start tabindex || 150 is last tabindex
    $(document).keypress(function(event) {
        var keycode = (event.keyCode ? event.keyCode : event.which);
        if(keycode == '13') { //onEnter
            tabindex++;
            //while element exist or it's readonly and tabindex not reached max do
            while(($("[TabIndex='"+tabindex+"']").length == 0 || $("[TabIndex='"+tabindex+"']:not([readonly])").length == 0) && tabindex != 150 ){
                tabindex++;
            }
            if(tabindex == 150){ tabindex = 1 } //reseting tabindex if finished
            $("[TabIndex='"+tabindex+"']").focus()
            return false;
        }
    });

    $("input").click(function() { //if changing field manualy with click - reset tabindex 
        var input = $(this);
        tabindex = input.attr("tabindex");
    })

我希望有人会觉得它很有用。随意编辑/评论它。

Answer 4

var tab = $(this).attr("tabindex");
tab++;
$("[tabindex='"+tab+"']").focus();

Answer 5

为了找到这个问题的解决方案，我生成了一个小的jquery函数来查找下一个有效的tabindex;假设它更容易维护，并且可能比while循环更快：

function getNextTabindex(currentTabIndex) {
  return $("[tabindex]").index($("[tabindex=" + currentTabIndex + "]")) + 1;
}

希望这对需要它的人有所帮助;这是经过测试和运作的。

简要解释一下：寻找当前tabindex的元素，在所有tabindex元素的列表中找到此元素，获取它的索引并增加索引。

然后，使用此函数，您可以选择下一个tabindex元素：

$('[tabindex=' + getNextTabindex($(":focus").attr("tabindex")) + ']').focus();

我没有测试电话，但认为它可以工作。

Answer 6

var tabindex= $(this).attr("tabindex");
tabindex++;
$("[tabindex='"+tabindex+"']").focus();

表格中可编辑单元格的样本

    $(document).on('dblclick', 'td', function () {
        console.log('clicked');
        this.contentEditable = 'true';
    });
 $(document).on('keydown', 'td', function (event) {
        if (event.keyCode === 9 || event.keyCode === 13) {
            this.contentEditable = 'false';
            //  $(this).next().focus().dblclick().focus();
            var tabindex = $(this).attr('tabindex');
            tabindex++;
            var next = $('[tabindex=' + tabindex + ']').focus().dblclick();
            if (next.is('td') == false)
                return true;
            var sel, range;
            if (window.getSelection && document.createRange) {
                range = document.createRange();
                range.selectNodeContents(next[0]);
                range.collapse(true);
                sel = window.getSelection();
                sel.removeAllRanges();
                sel.addRange(range);
            } else if (document.body.createTextRange) {
                range = document.body.createTextRange();
                range.moveToElementText(next[0]);
                range.collapse(true);
                range.select();
            }

            return false;
        }
    });

Editable cells in dynamic table

通过JQuery关注HTML元素onEnter keypress的下一个tabindex

6 个答案: