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 ...
随机推荐
- ES6的新特性（8）——数组的扩展
数组的扩展 扩展运算符 含义 扩展运算符(spread)是三个点(...).它好比 rest 参数的逆运算,将一个数组转为用逗号分隔的参数序列. console.log(...[1, 2, 3]) / ...
- Scrum立会报告+燃尽图（十月三十日总第二十一次）
此作业要求参见:https://edu.cnblogs.com/campus/nenu/2018fall/homework/2290 项目地址:https://git.coding.net/zhang ...
- Scrum立会报告+燃尽图（十月二十三日总第十四次）
此作业要求参见:https://edu.cnblogs.com/campus/nenu/2018fall/homework/2246 项目地址:https://git.coding.net/zhang ...
- 【探路者】团队互评Alpha版本
[探路者]组互评连接: 1互评作品:SkyHunter http://www.cnblogs.com/zej87/p/7802000.html 2互评作品:爱阅app http://www.cnblo ...
- 在html中怎么格式化输出json字符串
#今天的项目用到,看俊哥找到,特此记录下来 步骤: 1.在html页面中输入下面的标签,必须是在pre标签内输出格式才会生效: <pre id="songReqJson"&g ...
- 获取emacs安装的elpa包名称
| grep "./" | sed 's/\.\///g' | sed 's/-[0-9].*$//' | sort -u
- (windows下的)Apache无法启动解决 the requested operation has failed
以下文章是转载别人的,这里只做学习用 ============================================================================== ...
- AdminLTE 框架应用（一 ）- 插件介绍
原AdminLTE中的插件让我大部分都移除了,第一是占地方,需要的时候再引入也不迟,第二就是有些插件已经过时了,有比较好的插件可以替代.附上项目插件截图 1.bootstrap-addTabs 提供多 ...
- java内存加载机制
什么是java类加载? 类加载是指将.class类中的二进制数据存放到内存中,会在内存中的推中建立一个java.lang.String的引用对象来存放方法区的数据结构,而类中的数据会放到方法区中 类加 ...
- pixi.js 微信小游戏 入手
pixi是什么?一款h5游戏引擎 优点:简单简洁性能第一 缺点:大多数用的国产三大引擎,pixi资料少,工具少, 为什么学,装逼 用pixi开发小游戏行吗? 行.但要简单处理下 下载官网上的 weap ...