• 奥展项目笔记10--js实现上下键控制光标移动


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

    效果图:

  • 相关阅读:
    vpp + vxlan
    vpp + frrouting
    VPP + vxlan
    dpdk: Unsupported PCI device 0x19e5:0x0200 found at PCI address 0000:05:00.0
    How-to: Build VPP FD.IO with Mellanox DPDK PMD on top CentOS 7.7 with inbox drivers.
    vpp[73384]: register_node:485: process stack: Invalid argument (errno 22)
    鲲鹏920上vpp--dpdk编译
    编译frr--python版本问题--Python-3.7.7
    安装vpp
    Go排序
  • 原文地址:https://www.cnblogs.com/luckyplj/p/12181908.html
Copyright © 2020-2023  润新知