javascript - 按下回车键时将焦点设置到下一个下一个框

Question

HTML

<form action="#">
     <table cellpadding="0" cellspacing="0" width="100%" class="formTbl">
            <tr>
                <td width="20%"><label>ExportDate</label></td>
                <td width="30%"><input name="TxtExportDate" type="text" id="TxtExportDate" readonly="readonly" />
                 <img src="Images/icon-calender.png" id="imgEExpDate" />

                    <span id="cvExportDate" style="color:Red;display:none;"></span>
                </td>
                <td width="20%"><label>UniqueExportId</label></td>
                <td width="30%"><input name="TxtUniqueExportId" type="text" id="TxtUniqueExportId" /></td>
            </tr>
            <tr>
                <td><label>Exporter Of Record</label></td>
                <td><input name="TxtExporterOfRecord" type="text" id="TxtExporterOfRecord" /></td>
                <td><label>Destination</label></td>
                <td><input name="TxtDestination" type="text" id="TxtDestination" /></td>
            </tr>
            <tr>
                <td><label>Transport Mode</label></td>
                <td><input name="TxtTransportMode" type="text" id="TxtTransportMode" /></td>
                <td><label>Carrier</label></td>
                <td><input name="TxtCarrier" type="text" id="TxtCarrier" /></td>
            </tr>
            <tr>
                <td><label>AESNo</label></td>
                <td><input name="TxtAESNo" type="text" id="TxtAESNo" onkeydown="return jsAllowNumericChar(event,&#39;decimal&#39;);" />
                    <span id="cvAESNo" style="display:none;"></span></td>
                <td><label>AESDate</label></td>
                <td><input name="TxtAESDate" type="text" id="TxtAESDate" readonly="readonly" />
                 <img src="Images/icon-calender.png" id="imgAESDate" />

                    <span id="cvAESDate" style="color:Red;display:none;"></span>
                </td>

            </tr>
             <tr>
                <td><label>Status</label></td>
                <td><input name="txtStatus" type="text" id="txtStatus" /></td>
                <td colspan="2"></td>
            </tr>
            <tr>
                <td><label>Reference 1</label></td>
                <td><input name="TxtReference1" type="text" id="TxtReference1" /></td>
                <td><label>Reference 2</label></td>
                <td><input name="TxtReference2" type="text" id="TxtReference2" /></td>
            </tr>
            <tr>
                <td><label>Reference 3</label></td>
                <td><input name="TxtReference3" type="text" id="TxtReference3" /></td>
                <td><label>Reference 4</label></td>
                <td><input name="TxtReference4" type="text" id="TxtReference4" /></td>
            </tr>
            <tr>
                <td><label>Reference 5</label></td>
                <td><input name="TxtReference5" type="text" id="TxtReference5" /></td>
                <td><label>Reference 6</label></td>
                <td><input name="TxtReference6" type="text" id="TxtReference6" /></td>
            </tr>
            <tr>
                <td><label>Reference 7</label></td>
                <td><input name="TxtReference7" type="text" id="TxtReference7" /></td>
                <td><label>Reference 8</label></td>
                <td><input name="TxtReference8" type="text" id="TxtReference8" /></td>
            </tr>
            <tr>
                <td><label>Direct ID</label></td>
                <td><input name="TxtDirectId" type="text" id="TxtDirectId" /></td>
                <td><label>Produced Date</label></td>
                <td><input name="TxtProducedDate" type="text" id="TxtProducedDate" readonly="readonly" />
                 <img src="Images/icon-calender.png" id="imgProduceDate" />

                    <span id="cvProducedDate" style="color:Red;display:none;"></span>
                </td>
            </tr>
            <tr>
                <td><label>Goods Issued Date</label></td>
                <td><input name="TxtGoodsIssuedDate" type="text" id="TxtGoodsIssuedDate" readonly="readonly" />
                 <img src="Images/icon-calender.png" id="imgGoodIssueDate" />

                    <span id="cvGoodsIssuedDate" style="color:Red;display:none;"></span>
                </td>
                <td><label>Shipping Date</label></td>
                <td><input name="TxtShippingDate" type="text" id="TxtShippingDate" readonly="readonly" />
                 <img src="Images/icon-calender.png" id="imgShippingDate" />

                    <span id="cvShippingDate" style="color:Red;display:none;"></span>
                </td>
            </tr>
            <tr>
                <td><label>Part No</label></td>
                <td><input name="TxtPartNo" type="text" id="TxtPartNo" /></td>
                <td><label>Alternate Part</label></td>
                <td><input name="TxtAlternatePart" type="text" id="TxtAlternatePart" /></td>
            </tr>
            <tr>
                <td><label>Unit Of Measuremnt</label></td>
                <td><input name="TxtUnitOfMeasuremnt" type="text" id="TxtUnitOfMeasuremnt" /></td>
                <td><label>Export Qty</label></td>
                <td><input name="TxtExportQty" type="text" id="TxtExportQty" onkeydown="return jsAllowNumericChar(event,&#39;decimal&#39;);" />
                <span id="cvExportQty" style="display:none;"></span></td>
            </tr>
            <tr>
                <td><label>Part Description</label></td>
                <td><input name="TxtDescription" type="text" id="TxtDescription" /></td>
                <td><label>Claim Code</label></td>
                <td><input name="TxtClaimCode" type="text" id="TxtClaimCode" /></td>
            </tr>
            <tr>
                <td><label>Avail Qty</label></td>
                <td><input name="TxtAvailQty" type="text" id="TxtAvailQty" onkeydown="return jsAllowNumericChar(event,&#39;decimal&#39;);" />
                <span id="cvAvailQty" style="display:none;"></span></td>
                <td><label>Cont Qty</label></td>
                <td><input name="TxtContQty" type="text" id="TxtContQty" onkeydown="return jsAllowNumericChar(event,&#39;decimal&#39;);" />
                <span id="cvContQty" style="display:none;"></span></td>
            </tr>
            <tr>
                <td><label>ScheduledB</label></td>
                <td><input name="TxtScheduledB" type="text" maxlength="10" id="TxtScheduledB" /></td>
                <td><label>HIT</label></td>
                <td><input name="TxtHIT" type="text" id="TxtHIT" onkeydown="return jsAllowNumericChar(event,&#39;decimal&#39;);" />
                <span id="cvHIT" style="display:none;"></span></td>
            </tr>
            <tr>
                <td><label>FTA Duty</label></td>
                <td><input name="TxtFTADuty" type="text" id="TxtFTADuty" onkeydown="return jsAllowNumericChar(event,&#39;decimal&#39;);" />
                <span id="cvFTADuty" style="display:none;"></span></td>
                <td><label>FTA Rate</label></td>
                <td><input name="TxtFTARate" type="text" id="TxtFTARate" onkeydown="return jsAllowNumericChar(event,&#39;decimal&#39;);" />
                <span id="cvFTARate" style="display:none;"></span></td>
            </tr>
            <tr>
                <td><label>US Duty</label></td>
                <td><input name="TxtUSDuty" type="text" id="TxtUSDuty" onkeydown="return jsAllowNumericChar(event,&#39;decimal&#39;);" />
                <span id="cvUSDuty" style="display:none;"></span></td>
                <td><label>US Rate</label></td>
                <td><input name="TxtUSRate" type="text" id="TxtUSRate" onkeydown="return jsAllowNumericChar(event,&#39;decimal&#39;);" />
                <span id="cvUSRate" style="display:none;"></span></td>
            </tr>
            <tr>
                <td>
                    <label>
                        Share Partner Code</label>
                </td>
                <td>
                    <input name="TxtSharePartnerCode" type="text" id="TxtSharePartnerCode" />
                </td>
                <td><label> Contract Number </label> </td>
                  <td>
                 <input name="txtContractNumber" type="text" maxlength="15" id="txtContractNumber" class="TextBox" autocomplete="Off" />   
                </td>
            </tr>
            <tr>
            <td></td>
            <td colspan="3">
            <input type="submit" name="BtnAdd" value="Save" onclick="javascript:WebForm_DoPostBackWithOptions(new WebForm_PostBackOptions(&quot;BtnAdd&quot;, &quot;&quot;, true, &quot;AddExport&quot;, &quot;&quot;, false, false))" id="BtnAdd" class="blueBtn" />

             <input type="submit" name="BtnCancel" value="Cancel" id="BtnCancel" class="blueBtn" />
            </td>
            </tr>
           </table>
    <input type="submit" value="submit"/>
</form>

Javascript

$("input").bind("keydown", function(event) {
    if (event.which === 13) {
        event.stopPropagation();
        event.preventDefault();
        $(this).nextAll("input").eq(0).focus();
    }
});

我已经更新了这个 fiddle

http://jsfiddle.net/andrewwhitaker/GRtQY/

有了这个

fiddle

http://jsfiddle.net/mparvez1986/L8Ax7/

但更新后的 fiddle 不起作用，请帮忙

Answer 1

那是因为 .nextAll() 只选择下一个 sibling ，而在你的第一个 fiddle 中输入的是 sibling ，而在第二个 fiddle 中则不是这种情况。在您的情况下，更好的选择是使用 .index() 方法:

var $inputs = $("input").on("keydown", function(event) {
    if (event.which === 13) {
        event.stopPropagation();
        event.preventDefault();
        // `i` is the index of the current element 
        // in the cached jQuery collection
        var i = $inputs.index(this);
        $inputs.eq(i+1).focus();
    }
});

http://jsfiddle.net/6S7Kc/