html代码:
<div class="col-md-2 title">企业名称:</div> <div class="col-md-4 data"> <input type="text" class="form-control" placeholder="请输入企业名称" value="" v-model="form.company" onkeydown="moveCursor(this,event)"> </div> <div class="col-md-2 title">到货时间:</div> <div class="col-md-4 data"> <input type="text" class="form-control" placeholder="请输入到货时间" value="" v-model="form.arrivetime" onkeydown=" moveCursor(this,event)"> </div> <div class="col-md-2 title">炉号 Heat No:</div> <div class="col-md-4 data"> <input type="text" class="form-control" placeholder="请输入炉号" value="" v-model="form.heatno" onkeydown="moveCursor(this,event)"> </div> <div class="col-md-2 title">交货状态:</div> <div class="col-md-4 data"> <input type="text" class="form-control" placeholder="请输入交货状态" value="" v-model="form.deliver" onkeydown="moveCursor(this,event)"> </div>
js代码:
//jQuery实现在一个输入框按下键后光标跳到下一个输入框 function focusNextInput(thisInput) { let inputs = document.getElementById("inspect-part1").getElementsByTagName("input"); for(var i = 0;i<inputs.length;i++){ // 如果是最后一个,则焦点回到第一个(如果想实现按顺序可以登陆,可以写入登陆方法) if(i==(inputs.length-1)){ inputs[0].focus(); break; }else if(thisInput == inputs[i]){ inputs[i+2].focus(); break; } } } //jQuery实现在一个输入框按上键后光标跳到上一个输入框 function focusLastInput(thisInput) { let inputs = document.getElementById("inspect-part1").getElementsByTagName("input"); for(var i = 0;i<inputs.length;i++){ // 如果是最后一个,则焦点回到第一个(如果想实现按顺序可以登陆,可以写入登陆方法) if(thisInput==inputs[0]){ inputs[inputs.length-1].focus(); break; }else if(thisInput == inputs[i]){ inputs[i-2].focus(); break; } } } function moveCursor(thisInput,event){ var e = event || window.event || arguments.callee.caller.arguments[0]; if(e && e.keyCode==38){//上 console.log("hello"); focusLastInput(thisInput); } if(e && e.keyCode==40){//下 focusNextInput(thisInput); } }
效果图: