input模拟
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>vue $set</title>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<style type="text/css">
</style>
<body>
<div id="app">
<input v-model="value3" readonly spellcheck="false" style="width: 400px;">
</div>
<script>
var Main = {
data () {
return {
value3: '',
}
},
methods: {
filterMethod (e) {
if(e.keyCode===13){
alert(this.value3);
}
},
},
}
var Component = Vue.extend(Main)
let App=new Component().$mount('#app'); var input=document.querySelector('input');
class KeyEvent {
init(input,obj,key){//三个参数，第一个是节点input，第二个是挂在那个节点上，第三个双向绑定
this.Input=input;
this.InputVal=[];
this.keyVal=[];
this.realy=false;
this.start=0;
this.end=0;
this.vm=obj;
this.Input.addEventListener('compositionstart',(e)=>{//输入框第一位
this.InputVal=this.Input.value.length>0 ? this.Input.value :'';
this.start=this.Input.selectionStart;
this.end=this.Input.selectionEnd;
this.realy=true;
});
function FtoH(str){
var str=str;
var result="";
for (var i = 0; i < str.length; i++){
if (str.charCodeAt(i)==12288){
result+= String.fromCharCode(str.charCodeAt(i)-12256);
continue;
}
if (str.charCodeAt(i)>65280 && str.charCodeAt(i)<65375) result+= String.fromCharCode(str.charCodeAt(i)-65248);
else result+= String.fromCharCode(str.charCodeAt(i));
}
return result;
}
this.Input.addEventListener('keyup',(e)=>{//keyup时，把全角转换
this.vm[key]=FtoH(this.vm[key]);
})
this.Input.addEventListener('keydown',(e)=>{
// if(e.key.toUpperCase()==='PROCESS'){//在中文输入法下
if(/Backspace/.test(e.code)){//中文输入法还没有进入输入框内时，然后删除
this.keyVal.splice(this.keyVal.length-1,1)
}
if(/Key/.test(e.code)){
let code=e.code.replace('Key','').toLowerCase();
this.keyVal.push(code);
}else if(/Digit/.test(e.code) && this.realy===true){//以Digit开头，并且不是第一位
let code=e.code.replace('Digit','').toLowerCase();
this.keyVal.push(code);
}else if(/Numpad\d/.test(e.code)&&e.code!=='NumpadEnter'){//在右边数字键盘数字是Numpad开头的
let code=e.code.replace('Numpad','').toLowerCase();
this.keyVal.push(code);
}
else if(/NumpadDivide|Slash/.test(e.code)){//除号/
this.keyVal.push('/');
}
else if(/NumpadMultiply/.test(e.code)){//乘号/
this.keyVal.push('*');
}
else if(/NumpadSubtract/.test(e.code)){//减号/
this.keyVal.push('-');
}
else if(/NumpadAdd/.test(e.code)){//加号/
this.keyVal.push('+');
}
else if(/NumpadDecimal|Period/.test(e.code)){//小数点/
this.keyVal.push('.');
}
else if(/Semicolon/.test(e.code)){
this.keyVal.push(':');
}
this.vm.value3=this.keyVal.join('')
// }
});
this.Input.addEventListener('compositionend', (e) =>{
if(this.keyVal.length>0){
if(this.end-this.start===0 && this.start===this.InputVal.length){
this.Input.value=this.InputVal+this.keyVal.join('');
}else if(this.end-this.start===0 && this.end<this.InputVal.length){
this.Input.value=this.InputVal.substring(0,this.end)+this.keyVal.join('')+this.InputVal.substring(this.end,this.InputVal.length);
}else if(this.end-this.start>0){
this.Input.value=this.InputVal.substring(0,this.start)+this.keyVal.join('')+this.InputVal.substring(this.end,this.InputVal.length);
}else if(this.end-this.start===0 && this.start>this.InputVal.length){
this.Input.value=this.InputVal+this.keyVal.join('');
}
this.vm[key]=this.Input.value;
this.Input.selectionStart=this.start+this.keyVal.length;
this.Input.selectionEnd=this.start+this.keyVal.length;
this.keyVal=[];
this.realy=false;
}
}, false);
}
}
const _Key = new KeyEvent();
_Key.init(input,App,'value3');
</script>
</body>
</html>
input模拟的更多相关文章
- 用div，ul，input模拟select下拉框
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title&g ...
- H5新特性 input type=date 在手机上默认提示显示无效解决办法
目前PC端对input 的date类型支持不好,我试下来的结果是只有chrome支持.firefox.IE11 都不支持.而且PC端有很多日历控件可供使用.就不去多考虑这点了. 那么在移动端的话,io ...
- 手机端input[type=date]的时候placeholder不起作用解决方案
目前PC端对input 的date类型支持不好,我试下来的结果是只有chrome支持.firefox.IE11 都不支持.而且PC端有很多日历控件可供使用.就不去多考虑这点了. 那么在移动端的话,io ...
- C#模拟鼠标、键盘操作
C语言 在程序中打开网页,模拟鼠标点击.键盘输入 一.简述 记--使用C语言 打开指定网页,并模拟鼠标点击.键盘输入.实现半自动填写账号密码,并登录网站(当然现在的大部分网站都有验证码 ...
- 2019-05-12 Python之模拟体育竞赛
一.简介 可以选择任意规则,模拟不同的两个队伍进行球赛的模拟比赛 二.源代码 函数介绍: from random import * #输出介绍信息 def printIntro(): print(&q ...
- 【web前端面试题整理07】我不理解表现与数据分离。。。
拜师传说 今天老夫拜师了,老夫有幸认识一个JS高手,在此推荐其博客,悄悄告诉你,我拜他为师了,他承诺我只收我一个男弟子..... 师尊刚注册的账号,现在博客数量还不多,但是后面点会有干货哦,值得期待. ...
- 我心目中的Asp.net核心对象
转:http://www.cnblogs.com/fish-li/archive/2011/08/21/2148640.html 阅读目录 开始 HttpRuntime HttpServerUtili ...
- JS为Select下拉框添加输入功能
JavaScript使用parentNode.nextSibling.value实现的本功能,实际上你会发现网页上有两个控件元素,一个是Select,一个是input,使用CSS将input覆盖于se ...
- JavaScript 通过队列实现异步流控制
知乎上面看到一个面试题. 某个应用模块由文本框 input,以及按钮 A,按钮 B 组成.点击按钮 A,会向地址 urlA 发出一个 ajax 请求,并将返回的字符串填充到 input 中(覆盖 in ...
随机推荐
- 2016-6-2-第二个sprint
1.开始一个新的冲刺: 起止:2016.6.1~2016.6.14 ProductBacklog:继续向下细化 Sprint 计划会议:确定此次冲刺要完成的目标 Sprint Backlog:新的冲刺 ...
- Junit4 单元测试框架的常用方法介绍
Junit 介绍: Junit是一套框架(用于JAVA语言),由 Erich Gamma 和 Kent Beck 编写的一个回归测试框架(regression testing framework),即 ...
- 敏捷开发 Scrum 综述
敏捷开发 Scrum 综述 这一星期学习了敏捷开发,然后阅读了相关的书籍,从网上查找了很多相关的资料,对敏捷开发scrum有了更加深刻了理解,对敏捷开发做了如下总结: 一.什么是敏捷开发? 敏捷开发提 ...
- 404 Note Found -（课堂实战）- 项目UML设计（团队）
目录 团队信息 分工选择 课上分工 课下分工 ToDolist alpha版本要做的事情 燃尽图 UML 用例图 状态图 活动图 类图 部署图 实例图 对象图 时序图 包图 通信图 贡献分评定 课上贡 ...
- Storm元数据交互详解
一.Nimbus Nimbus既需要在Zookeeper中创建元数据,也需要从Zookeeper中获取元数据. 如上图箭头1所示: 1.对于路径a,Nimbus只会创建路径,不会设置数据,数据是稍后由 ...
- jQuery之_元素滚动
对应的知识点铺垫,但是有一个很重要的问题就是兼容IE和chorme的 1. scrollTop(): 读取/设置滚动条的Y坐标2. $(document.body).scrollTop()+$(doc ...
- QMap使用
版权声明:若无来源注明,Techie亮博客文章均为原创. 转载请以链接形式标明本文标题和地址: 本文标题:QMap使用 本文地址:https://www.techieliang.com/201 ...
- 【第三周】每周psp
代码累计 300+575+475=1250 随笔字数 1700+3000+3785=8485 知识点 Cppunit框架 Ui设计 Scrum站立会议 燃尽图(好像没燃起来) 博客写作技能 本周主要是 ...
- 10个linux网络和监控命令
我下面列出来的10个基础的每个linux用户都应该知道的网络和监控命令.网络和监控命令类似于这些: hostname, ping, ifconfig, iwconfig, netstat, nsloo ...
- mysql中一些表选项
表选项列表 表选项就是,创建一个表的时候,对该表的整体设定,主要有如下几个: charset = 要使用的字符编码, engine = 要使用的存储引擎(也叫表类型), auto_increment ...