技术标签: vue
键盘
<div id="keyboardDiv" class="keyboardDiv keyboardStyle" style="display:none;position:fixed;z-index:20;" @mousedown="keyBoardFocusEvent" >
<ul class="keyBox">
<li class="keyStyle" data-key="1" data-code="49" @mousedown="keyDown($event)" @mouseup="keyUp($event)">1</li>
<li class="keyStyle" data-key="2" data-code="50" @mousedown="keyDown($event)" @mouseup="keyUp($event)">2</li>
<li class="keyStyle" data-key="3" data-code="51" @mousedown="keyDown($event)" @mouseup="keyUp($event)">3</li>
</ul>
<ul class="keyBox">
<li class="keyStyle" data-key="4" data-code="52" @mousedown="keyDown($event)" @mouseup="keyUp($event)">4</li>
<li class="keyStyle" data-key="5" data-code="53" @mousedown="keyDown($event)" @mouseup="keyUp($event)">5</li>
<li class="keyStyle" data-key="6" data-code="54" @mousedown="keyDown($event)" @mouseup="keyUp($event)">6</li>
</ul>
<ul class="keyBox">
<li class="keyStyle" data-key="7" data-code="55" @mousedown="keyDown($event)" @mouseup="keyUp($event)">7</li>
<li class="keyStyle" data-key="8" data-code="56" @mousedown="keyDown($event)" @mouseup="keyUp($event)">8</li>
<li class="keyStyle" data-key="9" data-code="57" @mousedown="keyDown($event)" @mouseup="keyUp($event)">9</li>
</ul>
<ul class="keyBox">
<li class="keyStyle" data-key="." data-code="110" @mousedown="keyDown($event)" @mouseup="keyUp($event)">.</li>
<li class="keyStyle" data-key="0" data-code="48" @mousedown="keyDown($event)" @mouseup="keyUp($event)">0</li>
<li class="keyStyle" data-key="delete" data-code="46" style="background-color:#FFA07A" @mousedown="keyDown($event)" @mouseup="keyUp($event)">清除</li>
</ul>
</div>
样式
// 键盘样式开始
#keyboardDiv{
margin-top: 50px;
}
.keyboardStyle{
position: absolute;
right: 45px;
top: 30px;
background-color: #72BBD7;
padding: 15px 0px;
border-radius:20px;
width: 328px;
}
#keyboardDiv .keyBox{
text-align: center;
color: #ffffff;
min-width: 350px;
height: 47px;
margin-left: -30px;
margin-top: 0px;
margin-right: 8px;
}
#keyboardDiv .keyStyle{
display: inline-block;
width: 100px;
height: 65px;
border: 2px solid #FFF;
border-radius: 10px;
line-height: 60px;
text-align: center;
text-transform: uppercase;
-moz-user-select: none;
transition: all 0.5s ease 0s;
cursor: pointer;
font-size: 20px;
}
.selectKey{
color: red;
background: rgb(255, 255, 255) none repeat scroll 0% 0%;
}
// 键盘样式结束
键盘按键按下事件
keyDown(event){
// let key = window.event.keyCode;
// var code = (event.keyCode ? event.keyCode : event.which);
this.ifKeysShow = true
var key = event.target.attributes[1].nodeValue
var dataCode = event.target.attributes[2].nodeValue
if(event){
//1.先获取文本框id以及其原本的字符串
var activeId = this.focusedTextId;//获取焦点的控件
var divText =''
if(activeId==='targetWeightDiv'){
divText = this.targetWeight + ''
}else if(activeId==='furPreDiv'){
divText = this.furnace_pre + ''
}else if(activeId==='furAppendDiv'){
divText = this.furnace_append + ''
}else{
// divText = document.getElementById(activeId).innerHTML
// divText = $("input[id="+activeId+"]").val()
divText = this.$refs[activeId].value
if(!divText){
divText=""
}
}
//2.在已有的字符串基础上增/删
if(key==='delete'&&divText.length>0){
divText = divText.substring(0,divText.length-1)
}else if(key!=='delete'){
divText = divText + key
}
//3.将修改后的字符串赋值给文本框
if(activeId==='targetWeightDiv'){
this.targetWeight = divText
}else if(activeId==='furPreDiv'){
this.furnace_pre = divText
}else if(activeId==='furAppendDiv'){
this.furnace_append = divText
}else{
var id = this.$refs[activeId].$attrs.id
id = id.split('In')
var str = id[1] + 'Form'
this.$set(this[str],id[0],divText)
}
}
键盘按键松开
keyUp(event){
var key = event.target.attributes[1].nodeValue
var dataCode = event.target.attributes[2].nodeValue
//点击的按键除去class,使得其在松开鼠标左键后变回原色
$("#keyboardDiv li[data-code='" + dataCode + "']").removeClass("selectKey")
//获取焦点
document.getElementById(this.focusedTextId).focus()
this.ifKeysShow = false
//光标移到最后一位后面-DIV专用,input用不着
//下面的判断用于div控件,div获取光标后,光标位置会错乱,下面几行代码让光标挪到最后
if(this.focusedTextId=='targetWeightDiv'||this.focusedTextId=='furPreDiv'||this.focusedTextId=='furAppendDiv'){
var range = document.createRange();
// range.selectNodeContents(document.getElementById("targetWeightDiv"));
range.selectNodeContents(document.getElementById(this.focusedTextId));
range.collapse(false);
var sel = window.getSelection();
sel.removeAllRanges();
sel.addRange(range);
}
},
文本框聚焦事件
inputClickEvent(event){
var value = event.srcElement.attributes.id.nodeValue //光标所在控件的id值
this.focusedTextId = value
var X = $('#'+value).offset().top;//控件的位置
var Y = $('#'+value).offset().left;
$("#keyboardDiv").css("display","block");
$("#keyboardDiv").css("left", Y);//键盘将出现的位置
$("#keyboardDiv").css("top", X+30);
},
文本框失去焦点,键盘消失
//炉重文本框失去焦点事件触发小键盘隐藏/不隐藏
divBlur(){
if(!this.ifKeysShow){
$("#keyboardDiv").css("display","none");
this.focusedTextId = ''
}else{
document.getElementById(this.focusedTextId).focus()
}
},
文章浏览阅读936次,点赞22次,收藏26次。React核心基础
文章浏览阅读2k次。linux系统查看磁盘空间的命令是【df -hl】,该命令可以查看磁盘剩余空间大小。如果要查看每个根路径的分区大小,可以使用【df -h】命令。df命令以磁盘分区为单位查看文件系统。本文操作环境:red hat enterprise linux 6.1系统、thinkpad t480电脑。(学习视频分享:linux视频教程)Linux 查看磁盘空间可以使用 df 和 du 命令。df命令df 以磁..._df -hl
文章浏览阅读923次。uses ComObj;var ExcelApp: OleVariant;implementationprocedure TForm1.Button1Click(Sender: TObject);const // SheetType xlChart = -4109; xlWorksheet = -4167; // WBATemplate xlWBATWorksheet = -4167_range[char(96 + acolumn) + inttostr(65536)].end[xlup]
文章浏览阅读2.3k次。上图为任务代码,在任务具体执行的方法中使用,一定要写在方法内使用SpringContextUtil.getBean()方法实例化Spring service类下边是ruoyi-quartz模块中util/SpringContextUtil.java(已改写)import org.springframework.beans.BeansException;import org.springframework.context.ApplicationContext;import org.s..._ruoyi-quartz无法引入ruoyi-admin的service
文章浏览阅读2w次,点赞10次,收藏77次。yum,全称“Yellow dog Updater, Modified”,是一个专门为了解决包的依赖关系而存在的软件包管理器。可以这么说,yum 是改进型的 RPM 软件管理器,它很好的解决了 RPM 所面临的软件包依赖问题。yum 在服务器端存有所有的 RPM 包,并将各个包之间的依赖关系记录在文件中,当管理员使用 yum 安装 RPM 包时,yum 会先从服务器端下载包的依赖性文件,通过分析此文件从服务器端一次性下载所有相关的 RPM 包并进行安装。_centos7配置yum源
文章浏览阅读828次,点赞21次,收藏8次。今天学长向大家分享一个毕业设计项目毕业设计 基于深度学习的抽烟行为检测算法实现(源码分享)毕业设计 深度学习的抽烟行为检测算法实现通过目前应用比较广泛的 Web 开发平台,将模型训练完成的算法模型部署,部署于 Web 平台。并且利用目前流行的前后端技术在该平台进行整合实现运营车辆驾驶员吸烟行为检测系统,方便用户使用。本系统是一种运营车辆驾驶员吸烟行为检测系统,为了降低误检率,对驾驶员视频中的吸烟烟雾和香烟目标分别进行检测,若同时检测到则判定该驾驶员存在吸烟行为。进行流程化处理,以满足用户的需要。
文章浏览阅读3.7k次,点赞3次,收藏14次。多个定时器同步触发启动是一种比较实用的功能,这里将对此做个示例说明。_stm32 定时器同步
文章浏览阅读348次。出处 : http://www.cnblogs.com/mythou/p/3187881.html本来想分析AppsCustomizePagedView类,不过今天突然接到一个临时任务。客户反馈说机器界面的图标很难点击启动程序,经常点击了没有反应,Boss说要优先解决这问题。没办法,只能看看是怎么回事。今天分析一下Launcher启动APP的过程。从用户点击到程序启动的流程,下面针对WorkSpa..._回调bubbletextview
文章浏览阅读6.2k次。Ubuntu 12 最快的两个源 个人感觉 163与cn99最快 ubuntu下包过慢 1、首先备份Ubuntu 12.04源列表 sudo cp /etc/apt/sources.list /etc/apt/sources.list.backup (备份下当前的源列表,有备无患嘛) 2、修改更新源 sudo gedit /etc/apt/sources.list (打开Ubuntu 12_un.12.cc
文章浏览阅读5.8k次,点赞6次,收藏86次。1.思路(1)动态添加路由肯定用的是addRouter,在哪用?(2)vuex当中获取到菜单,怎样展示到界面2.不管其他先试一下addRouter找到router/index.js文件,内容如下,这是我自己先配置的登录路由现在先不管请求到的菜单是什么样,先写一个固定的菜单通过addRouter添加添加以前注意:addRoutes()添加的是数组在export defult router的上一行图中17行写下以下代码var addRoute=[ { path:"/", name:"_vue动态路由权限
文章浏览阅读8.9k次。 关键词: JSTL 之变量赋值标签 /* * Author Yachun Miao * Created 11-Dec-06 */关于JSP核心库的set标签赋值变量,有两种方式: 1.日期" />2. 有种需求要把ApplicationResources_zh_CN.prope
文章浏览阅读3.1k次,点赞3次,收藏2次。1.1ZY5621概述ZY5621是VGA音频到HDMI转换器芯片,它符合HDMI1.4 DV1.0规范。ZY5621也是一款先进的高速转换器,集成了MCU和VGA EDID芯片。它还包含VGA输入指示和仅音频到HDMI功能。进一步降低系统制造成本,简化系统板上的布线。ZY5621方案设计简单,且可以完美还原输入端口的信号,此方案设计广泛应用于投影仪、教育多媒体、视频会议、视频展台、工业级主板显示、手持便携设备、转换盒、转换线材等产品设计上面。1.2 ZY5621 特性内置MCU嵌入式VGA_vga转hdmi带音频转换器,转接头拆解