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 ...
随机推荐
- vue之指令篇 ps简单的对比angular
这两天在开始vue的大型项目,发现和ng还是有许多不同,这里对比下两者的指令系统 难度系数:ng的指令难度大于vue:至少vue上暂时没发现@&=:require,compile,precom ...
- Xftp安装和使用的视频录制方法
内容: 1.使用工具 2.操作步骤及方法 视频地址: http://v.youku.com/v_show/id_XMzEwNjg2MTg2NA==.html?spm=a2h3j.8428770.341 ...
- 第八，九周web制作代码
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.or ...
- MySQL数据库错误号：2003 - Can't connect to MYSQL server on 'localhost'(10061)
打开Windows+R在里面输入services.msc打开服务 在MySQL服务是右键点击启动,让其状态显为正在运行即可 启动完毕,然后再用命令CMD去连接,或者Navicat都不再报上面的错
- 人生的第一篇blog
开始写博客了,人生第一篇博客啊,要写些什么呢?想想也没有什么头绪,随便写写吧. 这学期要使用代码管理工具了,要写团队项目了.一直以来都是自己一个人在默默编程,没有过合作经历.对于代码的管理也只是一直在 ...
- 如何在一台 web 服务器上注册CA证书
试验环境介绍(CA的主机为192.168.23.10.httpd的主机为:192.168.23.11) 1:新建一台web服务器,主机名为www yum install -y httpd 2:生成 ...
- jdk&tomcat环境变量配置及同时运行多个tomcat方法
一:jdk配置 安装jdk1.7.0_51,安装过程中所有选项保持默认:最后配置 JDK的环境变量: 在“我的电脑”上点右键—>“属性”—>“高级”—>“环境变量(N)”. 1.新建 ...
- MySql中的varchar类型
转载:http://www.cnblogs.com/doit8791/archive/2012/05/28/2522556.html 1.varchar类型的变化 MySQL 数据库的varchar类 ...
- 【uoj#139】[UER #4]被删除的黑白树 贪心
题目描述 给出一个 $n$ 个节点的树,$1$ 号点为根.现要将其中一些点染成黑色,使得每个叶子节点(不包括根节点)到根节点路径上的黑点数相同.求最多能够染多少个黑点. 题解 贪心 显然有结论:选择的 ...
- 自动化生成html报告
package Utils; import java.io.File; import java.util.Date; import org.apache.commons.lang3.time.Date ...