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 ...
随机推荐
- 《C》数组
数组 数组方法: var arr = [1, 2, 3]; arr.push(4)://arr='[1, 2, 3, 4]' 向末尾添加一个或者多个元素 arr.pop()://删除末位元素 var ...
- Linux基础语句总结
看的视频是bilibili的网址如下:https://www.bilibili.com/video/av18069261/?p=36 然后做了点总结,可能有错误也可能有遗漏,同时参考了他人的资料. 系 ...
- DNS测试工具的使用（了解）
dig命令, host命令, nslookup命令,rndc命令 dig命令(直接测试DNS性能,不会查询/etc/hosts文件) dig [-t RR_TYPE] name [@SERVER] [ ...
- 软工实践团队展示——WorldElite
软工实践团队展示--WorldElite 本次作业链接 团队成员 031602636许舒玲(组长) 031602237吴杰婷 031602634吴志鸿 081600107傅滨 031602220雷博浩 ...
- Hibernate 应知应会
Hibernate 的关联关系的配置: 一对一外键约束: 举例子是一个丈夫和妻子:[一个丈夫只能有一位妻子] 表结构: CREATE TABLE `tbl_hus` ( `uuid` ) NOT NU ...
- logstash收集MySQL慢查询日志
#此处以收集mysql慢查询日志为准,根据文件名不同添加不同的字段值input { file { path => "/data/order-slave-slow.log" t ...
- P2573 [SCOI2012]滑雪
题目描述 a180285非常喜欢滑雪.他来到一座雪山,这里分布着 M 条供滑行的轨道和 N 个轨道之间的交点(同时也是景点),而且每个景点都有一编号 i ( 1≤i≤N )和一高度 Hi.a18028 ...
- hive 一次性命令
1.用hive查询,而不进入hive cli,查询后的值可以保存到文件中 #使用参数-e [hadoop@bigdata-senior01 ~]$ hive -e "select * fro ...
- 【刷题】BZOJ 2599 [IOI2011]Race
Description 给一棵树,每条边有权.求一条简单路径,权值和等于K,且边的数量最小.N <= 200000, K <= 1000000 Input 第一行 两个整数 n, k 第二 ...
- Mybatis笔记二：org.apache.ibatis.binding.BindingException: Invalid bound statement (not found)
错误异常:org.apache.ibatis.binding.BindingException: Invalid bound statement (not found): com.test.dao.N ...