Vue Components 数字键盘的实现


Posted in Javascript onSeptember 18, 2019

本文介绍了Vue Components 数字键盘的实现,分享给大家,具体如下:

项目地址 点击查看 

项目演示 点击查看

首先监听所有的input,有input聚焦时调起数字键盘,通过getBoundingClientRect判断input位置让数字键盘在input附近,失去焦点后则隐藏数字键盘

let inputElement = document.getElementsByTagName("input");
  [...inputElement].forEach(ipele => {
   ipele.addEventListener("focus", function(e) {
    $this.inputTarget = e.target;
    let scrollTop =
     window.pageYOffset ||
     document.documentElement.scrollTop ||
     document.body.scrollTop;
    let scrollLeft =
     window.pageXOffset ||
     document.documentElement.scrollLeft ||
     document.body.scrollLeft;
    $this.NumberkeyBoardStyle =
     "top:" +
     (e.target.getBoundingClientRect().top +
      scrollTop +
      e.target.offsetHeight) +
     "px;left:" +
     (e.target.getBoundingClientRect().left +
      scrollLeft +
      e.target.offsetWidth) +
     "px";
   });
   ipele.addEventListener("blur", function(e) {
    $this.inputTarget = null;
    $this.NumberkeyBoardStyle = "display:none";
   });
  });

点击小键盘时阻止默认事件,阻止input失去焦点。

BoardNumberKeyDown(e) {
   if (e && e.preventDefault) {
    e.preventDefault();
   } else {
    window.event.returnValue = false;
    return false;
   }
  },

点击小键盘时,根据事件委托,得出点击的数字,然后根据selectionStart,selectionEnd获取input中的焦点,将小键盘中的数字插入焦点处,最后焦点右移一位。

let inputTarget = this.inputTarget;
let Pointstart = inputTarget.selectionStart;
let PointEnd = inputTarget.selectionEnd;
let wordLength = inputTarget.value.length;
if (e.target.className == "numberTD" && e.target.innerText != "←") {
inputTarget.value =
 inputTarget.value.slice(0, Pointstart) +
 e.target.innerText +
 inputTarget.value.slice(PointEnd, wordLength);
//一个小数点和开头不能有小数点
inputTarget.value = inputTarget.value.replace(/^\./g, "");
inputTarget.value = inputTarget.value
 .replace(".", "$#$")
 .replace(/\./g, "")
 .replace("$#$", ".");
inputTarget.selectionStart = Pointstart + 1;
inputTarget.selectionEnd = Pointstart + 1;
//让光标显示在input可视区域
inputTarget.blur();
inputTarget.focus();

点击删除键时,删除光标处数字,最后光标右移。

if (e.target.className == "numberTD" &&
  e.target.innerText == "←" &&
  //PointEnd==0时会复制整个input的value
  PointEnd != 0
  ) {
    inputTarget.value =
     inputTarget.value.slice(0, Pointstart - 1) +
     inputTarget.value.slice(PointEnd, wordLength);
    inputTarget.selectionStart = Pointstart - 1;
    inputTarget.selectionEnd = Pointstart - 1;
    //让光标显示在input可视区域
    inputTarget.blur();
    inputTarget.focus();
   }

在删除数字和添加数字后要让input失去焦点在获取焦点,不然光标会在最后而不是在input的可视区域,这样子会看不到输入的值,具体可以查看项目。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
再谈ie和firefox下的document.all属性
Oct 21 Javascript
jQuery学习笔记(4)--Jquery中获取table中某列值的具体思路
Apr 10 Javascript
封装了一个支持匿名函数的Javascript事件监听器
Jun 05 Javascript
JQuery调用绑定click事件的3种写法
Mar 28 Javascript
JavaScript中判断两个字符串是否相等的方法
Jul 07 Javascript
JavaScript遍历求解数独问题的主要思路小结
Jun 12 Javascript
ECMAScript6 新特性范例大全
Mar 24 Javascript
微信小程序调用PHP后台接口 解析纯html文本
Jun 13 Javascript
React Form组件的实现封装杂谈
May 07 Javascript
JS实现前端路由功能示例【原生路由】
May 29 Javascript
JS实现4位随机验证码
Oct 19 Javascript
JS常用跨域方法实现原理解析
Dec 09 Javascript
layui输入框中只允许输入整数的实现方法
Sep 18 #Javascript
layui富文本编辑器前端无法取值的解决方法
Sep 18 #Javascript
使用layui 的layedit定义自己的toolbar方法
Sep 18 #Javascript
Typescript的三种运行方式(小结)
Sep 18 #Javascript
微信小程序授权登陆及每次检查是否授权实例代码
Sep 18 #Javascript
layui的layedit富文本赋值方法
Sep 18 #Javascript
vue语法自动转typescript(解放双手)
Sep 18 #Javascript
You might like
javascript 面向对象全新理练之数据的封装
2009/12/03 Javascript
Jquery Validation插件防止重复提交表单的解决方法
2010/03/05 Javascript
腾讯UED 漂亮的提示信息效果代码
2011/09/12 Javascript
jquery实现输入框动态增减的实例代码
2013/07/14 Javascript
javascript实现的平方米、亩、公顷单位换算小程序
2014/08/11 Javascript
JavaScript函数模式详解
2014/11/07 Javascript
关于验证码在IE中不刷新的快速解决方法
2016/09/23 Javascript
JS声明式函数与赋值式函数实例分析
2016/12/13 Javascript
Extjs让combobox写起来简洁又漂亮
2017/01/05 Javascript
JavaScript制作简易计算器(不用eval)
2017/02/05 Javascript
jQueryMobile之窗体长内容的缺陷与解决方法实例分析
2017/09/20 jQuery
vue数据传递--我有特殊的实现技巧
2018/03/20 Javascript
你不知道的Vue技巧之--开发一个可以通过方法调用的组件(推荐)
2019/04/15 Javascript
Python增量循环删除MySQL表数据的方法
2016/09/23 Python
浅谈配置OpenCV3 + Python3的简易方法(macOS)
2018/04/02 Python
对Python中type打开文件的方式介绍
2018/04/28 Python
Python使用pymongo库操作MongoDB数据库的方法实例
2019/02/22 Python
Jacobi迭代算法的Python实现详解
2019/06/29 Python
keras.layer.input()用法说明
2020/06/16 Python
如何用PyPy让你的Python代码运行得更快
2020/12/02 Python
Python try except finally资源回收的实现
2021/01/25 Python
预备党员思想汇报范文
2013/12/29 职场文书
大学生励志演讲稿
2014/04/25 职场文书
伦敦奥运会的口号
2014/06/21 职场文书
拒绝黄毒毒宣传标语
2014/06/26 职场文书
丧事答谢词
2015/01/05 职场文书
2015感人爱情寄语
2015/02/26 职场文书
2015年大学班主任工作总结
2015/04/30 职场文书
八年级语文教学反思
2016/03/03 职场文书
2016年教师党员公开承诺书
2016/03/24 职场文书
导游词之烟台威海蓬莱
2019/11/14 职场文书
nginx里的rewrite跳转的实现
2021/03/31 Servers
Django实现WebSocket在线聊天室功能(channels库)
2021/09/25 Python
vue中控制mock在开发环境使用,在生产环境禁用方式
2022/04/06 Vue.js
CSS控制继承中的height能变为可继承吗
2022/06/10 HTML / CSS
python自动获取微信公众号最新文章的实现代码
2022/07/15 Python