美文网首页
输入时使用键盘上下键实现光标上下移动功能

输入时使用键盘上下键实现光标上下移动功能

作者: bryan_liu | 来源:发表于2020-06-10 15:07 被阅读0次
    image.png

    如图所示,在当前测试要求那一列,使用键盘上下键,实现光标上下移动功能;

    <td>
        <input 
            maxlength="50" 
            type="text" 
            :disabled="lockStatus" 
            class="input-text" 
            :class="{'input-text-active':!lockStatus}" 
            :title="item.current_request" 
            :value="item.current_request" 
            @input="updateValue($event,'current_request',index)" 
            @keyup="keyboard($event,index,'current_request')" 
            ref="current_request" 
        />
    </td>
    
    export default {
        methods: {
            //键盘事件
            keyboard(evt, index, type) {
                var _this = this;
                var evt = (evt) ? evt : window.event;
                if (evt.keyCode == 40) {
                    index++;
                    if (index > _this.orderDetailsArr[_this.selectIndex].customer_test_item.length - 1) {
                        return false;
                    }
                    _this.$refs[type][index].focus();
                }
                if (evt.keyCode == 38) {
                    index--;
                    if (index < 0) {
                        return false;
                    }
                    _this.$refs[type][index].focus();
                }
                return false;
            },
        }
    }
    

    相关文章

      网友评论

          本文标题:输入时使用键盘上下键实现光标上下移动功能

          本文链接:https://www.haomeiwen.com/subject/pjcptktx.html