Question

Hi Friends, I m working on a small task which is to enable the user to tabindex the html element upon enter keypress.

我写了一些守则, 在我看来它会奏效, 但其中有一些问题。

Initial findings
The culprit code ,it doesnt work ,as the ouput in the Msg lablel is "Undefined"

$( * ).attr( tabindex ).id

""https://i.sstatic.net/OreevO.jpg" alt="此处的内置图像描述"/ >

我甚至创建了一个"http://jsfiddle.net/PPB9s/1/" rel="noreferrer" >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问题。固定在这里 : < a href="http://jsfidle. net/ vansimke/ PPB9s/3/" rel= “ noreferrer” > JSFiddle 。

此行 :

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

可以这样写 :

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

并且这一点:

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

是不调用 id 属性 jQuery 方式( 您正在使用 JavaScript 语法, 但$( this) 的结果是一个 jQuery 对象。所以... < code>$( this) 。 id 变成 $( this).attr( id) 。



表格中仍然有一个提交问题, 我没有深入了解, 但是它现在改变了焦点, 填满了#Mg元素 。

Answer 2

这是我在 keydown 上的完整工作代码 /strong> jQuery 和" rel="noreferrer">>> JSFiddird 示例上根据以下stackoverlow 答案创建的完整工作代码:

How to prevent ENTER keypress to submit a web form?

Focus Next Element In Tab Index

<script type="text/javascript"> function focusNextElement() { var focussableElements = a:not([disabled]), button:not([disabled]), input[type=text]:not([disabled]), [tabindex]:not([disabled]):not([tabindex="-1"]) ; if (document.activeElement && document.activeElement.form) { var focussable = Array.prototype.filter.call(document.activeElement.form.querySelectorAll(focussableElements), function(element) { return element.offsetWidth > 0 || element.offsetHeight > 0 || element === document.activeElement }); var index = focussable.indexOf(document.activeElement); focussable[index + 1].focus(); } } window.addEventListener( keydown , function(e) { if (e.keyIdentifier == U+000A || e.keyIdentifier == Enter || e.keyCode == 13) { if (e.target.nodeName === INPUT && e.target.type !== textarea ) { e.preventDefault(); focusNextElement(); return false; } } }, true); </script>

Answer 3

并用我发现有用的解决方案来制定SPAM。

从其他来源收集的信息(