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

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

作者: 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