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 相关文章推荐
javascript 打印内容方法小结
Nov 04 Javascript
深入理解javascript动态插入技术
Nov 12 Javascript
js实现的动画导航菜单效果代码
Sep 10 Javascript
浅谈JavaScript 标准对象
Jun 02 Javascript
搭建Bootstrap离线文档的方法
Dec 02 Javascript
js实现点击按钮弹出上传文件的窗口
Dec 23 Javascript
详解基于webpack2.x的vue2.x的多页面站点
Aug 21 Javascript
vue-router传递参数的几种方式实例详解
Nov 13 Javascript
深入理解 TypeScript Reflect Metadata
Dec 12 Javascript
JS实现扫码枪扫描二维码功能
Jan 03 Javascript
javascript实现简单页面倒计时
Mar 02 Javascript
Vue Element plus使用方法梳理
Dec 24 Vue.js
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
php判断类是否存在函数class_exists用法分析
2014/11/14 PHP
laravel 实现登陆后返回登陆前的页面方法
2019/10/03 PHP
深入浅析安装PhpStorm并激活的步骤详解
2020/09/17 PHP
JavaScript QueryString解析类代码
2010/01/17 Javascript
基于jQuery的Spin Button自定义文本框数值自增或自减
2010/07/17 Javascript
javascript实现信息的显示和隐藏如注册页面
2013/12/03 Javascript
父页面显示遮罩层弹出半透明状态的dialog
2014/03/04 Javascript
jquery获取tagName再进行判断
2014/05/29 Javascript
javascript实现随时变化着的背景颜色
2015/04/02 Javascript
JavaScript中数据结构与算法(二):队列
2015/06/19 Javascript
D3.js中强制异步文件读取同步的几种方法
2017/02/06 Javascript
深入理解javascript的getTime()方法
2017/02/16 Javascript
详解关于Angular4 ng-zorro使用过程中遇到的问题
2018/12/05 Javascript
解决在layer.open中使用时间控件laydate失败的问题
2019/09/11 Javascript
Vue实现星级评价效果实例详解
2019/12/30 Javascript
JS数组进阶示例【数组的几种函数用法】
2020/01/16 Javascript
浅谈vue项目利用Hbuilder打包成APP流程,以及遇到的坑
2020/09/12 Javascript
Python获取当前时间的方法
2014/01/14 Python
linux安装Python3.4.2的操作方法
2018/09/28 Python
使用Django开发简单接口实现文章增删改查
2019/05/09 Python
Python绘制频率分布直方图的示例
2019/07/08 Python
Python 2种方法求某个范围内的所有素数(质数)
2020/01/31 Python
pycharm实现在子类中添加一个父类没有的属性
2020/03/12 Python
Pycharm学生免费专业版安装教程的方法步骤
2020/09/24 Python
连卡佛中国官网:Lane Crawford中文站
2018/01/27 全球购物
英国家庭和商业健身器材购物网站:Fitness Options
2018/07/05 全球购物
酒店值班经理的工作职责范本
2014/02/18 职场文书
信电学院毕业生自荐书
2014/05/24 职场文书
求职教师自荐书
2014/06/19 职场文书
运动与健康自我评价
2015/03/09 职场文书
求职信格式范文
2015/03/19 职场文书
我在伊朗长大观后感
2015/06/16 职场文书
催款函怎么写
2015/06/24 职场文书
2015少先队大队辅导员工作总结
2015/07/24 职场文书
2015年乡镇组织委员工作总结
2015/10/23 职场文书
街道办残联2016年助残日活动总结
2016/04/01 职场文书