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 ...
随机推荐
- IT行业大学生就业分析报告感想
现如今的高校毕业生每年都在增长,就业压力只增不减,人才市场挤满了人 学生们普遍的表现出就业难的情况,并且适合自己的工作也难找 从报告中也容易看出IT行业很吸引人,也是人数最多的,因此机会也就变少了 在 ...
- QSettings配置读写-win注册表操作-ini文件读写
版权声明:若无来源注明,Techie亮博客文章均为原创. 转载请以链接形式标明本文标题和地址: 本文标题:QSettings配置读写-win注册表操作-ini文件读写 本文地址:http:// ...
- HDU 2105 The Center of Gravity
http://acm.hdu.edu.cn/showproblem.php?pid=2105 Problem Description Everyone know the story that how ...
- 【Linux】- 六个超赞的字符画生成器
ASCII是一个非常吸引人的字符编码系统,在计算机,通讯设备,以及其他设备中,通过它来用代码表示字符.新生代的人可能会觉得它已经过时了,但是那些熟悉它的人会懂得ASCII是多么的独特.我们在这里为你准 ...
- js控制iframe高度自动撑开
<iframe src="index.html" width="100%" name="" id="myiframe&quo ...
- presence_of_element_located与visibility_of_element_located区别
selenium 问题:加了显性等待后,操作元素依然出错 背景: 用WebDriverWait时,一开始用的是presence_of_element_located,我对它的想法就是他就是用来等待 ...
- 【明哥报错簿】之【inside the host appBase has been specified, and will be ignored】和【did not find a matching property.】
tomcat启动时有时候会报一些警告,项目有时候也是可以正常运行.但是警告出现还是要找到原因消灭掉,两个典型的警告解决办法如下: 1.[inside the host appBase has been ...
- （转）rabbitmq的web管理界面无法使用guest用户登录
转至http://www.cnblogs.com/mingaixin/p/4134920.html 安装最新版本的rabbitmq(3.3.1),并启用management plugin后,使用默认的 ...
- [洛谷P1642]规划
题目大意:有一棵$n(n\leqslant100)$个点的树,每个点有两个权值$a,b$,要求选择一个$m$个点的连通块$S$,最大化$\dfrac{\sum\limits_{i\in S}a_i}{ ...
- [TJOI2013]单词 AC自动机
题面: 洛谷 题解: 很久之前做的题了,只不过之前一直90....最近才发现是哪里写错了. 我们对字符集建AC自动机. 首先考虑一个暴力的做法,把文章当做一个长串,直接在自动机上跳,但是我们会发现,这 ...