zoukankan      html  css  js  c++  java
  • 奥展项目笔记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);
            }
    
    
        }

    效果图:

  • 相关阅读:
    CPT104-labs
    Java-数据结构-ArrayList
    INT104-lab13[Parzen Window Method][此方法无数据集划分]
    INT104-lab12 [KNN Algorithm][lambda表达式]
    INT104-lab11 [聚类] [iris数据集] [K-means Algorithm]
    Nginx配置https兼容http
    JS获取整个网页html代码
    nginx重启生效conf文件的修改
    WampServer
    在win10系统中,开启hyper-v要满足下列条件
  • 原文地址:https://www.cnblogs.com/luckyplj/p/12181908.html
Copyright © 2011-2022 走看看