前端通过input 输入框实现动态添加行 , 键盘上下左右点击可同步操作中心位置
1. input 代码 ,我们项目组的input封装了,不过不影响使用
通过 @keyup 事件绑定show方法,需要将当前行的信息以及index传递,方便操作
另外要单独给这些需要操作的输入框添加class,方便后面获取
<el-table-column className="mycell" min-width="auto;" align="center" label="尺寸" >
<template #default="scope">
<hd-inputupp @keyup="show($event,scope.$index)" class="table_input normalB_input" v-model="scope.row.clothSize" >
<template #append>
<div style="color:red;line-height: 24px">*</div>
</template>
</hd-inputupp>
</template>
</el-table-column> <el-table-column className="mycell" min-width="auto;" align="center" label="用量(KG)" >
<template #default="scope">
<el-input @keyup="show($event,scope.$index)" class="table_input normalY_input" v-model="scope.row.amount" >
<template #append>
<div style="color:red;line-height: 24px">*</div>
</template>
</el-input>
</template>
</el-table-column> <el-table-column className="mycell" min-width="auto;" align="center" label="理布票用量(KG)" >
<template #default="scope">
<el-input @keyup="show($event,scope.$index)" class="table_input focusB_input" v-model="scope.row.ticketAmount" >
<template #append>
<div style="color:red;line-height: 24px">*</div>
</template>
</el-input>
</template>
</el-table-column> <el-table-column className="mycell" min-width="auto;" align="center" label="价格" >
<template #default="scope">
<el-input @keyup="show($event,scope.$index)" class="table_input focusY_input" v-model="scope.row.price" >
<template #append>
<div style="color:red;line-height: 24px">*</div>
</template>
</el-input>
</template>
</el-table-column>
2. 方法实现
show(ev,index){
let newIndex ;
//通过ev 获取 当前input 名称 用于判断属于哪列
let clssName = ev.target.offsetParent.className;
//每一列
if(clssName.indexOf('normalB_input') != -1){ newIndex = index*4 ;//要操作几行就*几行 } else if (clssName.indexOf('normalY_input') != -1) { newIndex = index*4 + 1 ; } else if (clssName.indexOf('focusB_input') != -1) { newIndex = index*4 + 2; } else if (clssName.indexOf('focusY_input') != -1) { newIndex = index*4 + 3; }
let inputAll = document.querySelectorAll('.table_input input');
//向上 =38
if(ev.keyCode == 38){
//console.log("上");
//当焦点在第一行的时候 按向上的时候焦点要聚焦到前一列的最后一个
if(newIndex >=1 && newIndex<=3){
newIndex = newIndex + 47;
} else {
newIndex -= 4 ;
}
if( inputAll[newIndex] ){ inputAll[newIndex].focus();
}
} //下 = 40
if(ev.keyCode == 40){
//console.log("下");
//当newIndex 在最后一行的时候 焦点要聚焦到 下一列的第一个 newIndex += 4 ;
if(newIndex>=inputAll.length){
this.add();//我们项目需求是按下键的时候会新增行
}
if( inputAll[newIndex] ){
inputAll[newIndex].focus();
} } //左 = 37
if(ev.keyCode == 37){
//console.log("左");
newIndex -= 1 ; if( inputAll[newIndex] ){ inputAll[newIndex].focus(); }
} //右 = 39
if(ev.keyCode == 39){
//console.log("右");
newIndex += 1 ; if( inputAll[newIndex] ){ inputAll[newIndex].focus(); }
} },
前端通过input 输入框实现动态添加行 , 键盘上下左右点击可同步操作中心位置的更多相关文章
- 移动端 input 输入框实现自带键盘“搜索“功能并修改X
主要利用html5的,input[type=search]属性来实现,此时input和type=text外观和功能没啥区别: html代码入下: <form action="" ...
- 前端限制input输入框(只能输入正整数)
<input onkeyup="if(this.value.length==1){this.value=this.value.replace(/[^1-9]/g,'')}else{th ...
- 【前端】input输入框只能输入大于等于0的正数
大于等于0的正数,允许小数 <input type="number" step="1" min="0" onkeyup="t ...
- H5页面input输入框含有键盘自带的表情符时显示异常
在做一个关于新闻的评论功能的H5页面时,需求里面要求能够发送表情显示表情,如果使用自定义的表情库,则在评论也还要加载大量的表情符图片,极大的影响加载速度,消耗流量,去看了下别的新闻网页版的评论部分也没 ...
- 移动端input“输入框”常见问题及解决方法
转自 https://www.cnblogs.com/ljx20180807/p/9837748.html 1. ios中,输入框获得焦点时,页面输入框被遮盖,定位的元素位置错乱: 当页input存在 ...
- Input 输入框
Input 输入框 通过鼠标或键盘输入字符 <el-input v-model="input" placeholder="请输入内容"></e ...
- 苹果微信input输入框被键盘遮挡
最近一个项目,input输入框需要在页面的最下面(position:fixed),这样,当键盘获取焦点的时候, 苹果自带键盘不会挡住输入框,但是搜狗输入法的键盘就会挡住.可以用以下方法解决: docu ...
- jQuery动态添加、删除按钮及input输入框
输入框的加减实现: <html> <head> <meta charset="utf-8"> <title>动态创建按钮</t ...
- input输入框失去焦点,软键盘关闭后,滚动的页面无法恢复到原来位置
H5微信页面开发,软键盘弹起后,若原输入框被遮挡,页面整体将会上移,然而当输入框失焦,软键盘收起后,页面未恢复,导致弹框里的按钮响应区域错位. 解决方案:给输入框(或select选择框)添加失去焦点的 ...
- H5微信页面开发 IOS系统 input输入框失去焦点,软键盘关闭后,被撑起的页面无法回退到原来正常的位置,导致弹框里的按钮响应区域错位
H5微信页面开发,软键盘弹起后,若原输入框被遮挡,页面整体将会上移,然而当输入框失焦,软键盘收起后,页面未恢复,导致弹框里的按钮响应区域错位. 解决方案:给输入框(或select选择框)添加失去焦点的 ...
随机推荐
- [2] Bert 论文精读
BERT是NLP领域让预训练这件事情出圈的工作. 开篇Introduction介绍了两类主流的预训练方法: 1.feature-based,即基于特征的,即我首先通过预训练得到一些比较好的特征,然后将 ...
- props其他-混入mixin-插件-elementui使用-localStorage系列-vueRouter-vuex
目录 props其他-混入mixin-插件-elementui使用-localStorage系列-vueRouter-vuex 今日内容概要 今日内容详细 1 props其他 2 混入mixin 3 ...
- 软件架构易用性在软件UI中的体现
软件架构易用性在软件UI中的体现 贾硕航 (石家庄铁道大学,河北省石家庄市,050000) 摘要:易用性(usability)是一种以使用者为中心的设计概念,易用性设计的重点在于让产品的设计能够符合使 ...
- zip()
a=[1,2,3,4]b=[5,6,7,8]c=[10,11,12,13]zi=zip(a,b,c)print(list(zi)) 结果 [(1, 5, 10), (2, 6, 11), (3, 7, ...
- 阿里云仓库构建gcr镜像
经常用到gcr的镜像,但是由于国内无法访问,使用阿里云仓库构建 例如需要获取:gcr.io/spiffe-io/spire-server:1.0.1 镜像 1.使用阿里云code,创建项目,新项目 增 ...
- jQuery 中 remove删除了某个div 再添加回来
用下面的例子吧删除之前先保存dom<div id="div1"><div id="div2"></div></div& ...
- satpy 处理卫星 FY4A 数据
读取数据并画图 import os import glob from datetime import datetime, timedelta from satpy.scene import Scene ...
- P5737 闰年展示
快乐的题目穿梭机 这道题目其实so easy啦,还是先来顺一遍流程: 输入数据 列举出x到y区间内的年份 判断是否是闰年 是闰年cnt(或sum)计数器++ 输出计数器和年份 闰年知识补充站 1.能被 ...
- mathcurve.com
https://mathcurve.com/surfaces.gb/surfaces.shtml
- TODOList小黄条
TODOList http://www.yynote.cn/ 总结 windows中的神器