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

2020-06-10  本文已影响0人  bryan_liu
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;
        },
    }
}
上一篇 下一篇

猜你喜欢

热点阅读