将焦点设置到下一个nextbox上输入键按下

HTML将焦点设置到下一个nextbox上输入键按下

<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(); 
    } 
});

我有更新这个小提琴

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

与此

小提琴

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

，但更新的小提琴不能正常工作，请帮助

来源

2014-01-29 Md. Parvez Alam

这是因为.nextAll()只选择下一个兄弟姐妹，你的第一小提琴输入是兄弟姐妹这是不是情况下，在第二小提琴。在你的情况下，更好的选择是使用.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/

来源

2014-01-29 09:03:04 undefined

将焦点设置到下一个nextbox上输入键按下

回答

相关问题