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 相关文章推荐
baidu博客的编辑友情链接的新的层窗口!经典~支持【FF】
Feb 09 Javascript
ExtJS扩展 垂直tabLayout实现代码
Jun 21 Javascript
jQuery 表单验证扩展代码(二)
Oct 20 Javascript
Javascript面向对象编程
Mar 18 Javascript
Extjs Label的 fieldLabel和html属性值对齐的方法
Jun 15 Javascript
node.js中的fs.writeFile方法使用说明
Dec 14 Javascript
JavaScript获取浏览器信息的方法
Nov 20 Javascript
Angular5中提取公共组件之radio list的实例代码
Jul 10 Javascript
JS 数组随机洗牌的实例代码
Sep 12 Javascript
使用Vue.js 和Chart.js制作绚丽多彩的图表
Jun 15 Javascript
详解将微信小程序接口Promise化并使用async函数
Aug 05 Javascript
vue.js中使用微信扫一扫解决invalid signature问题(完美解决)
Apr 11 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
用PHP实现ODBC数据分页显示一例
2006/10/09 PHP
Linux下 php5 MySQL5 Apache2 phpMyAdmin ZendOptimizer安装与配置[图文]
2008/11/18 PHP
php文本转图片自动换行的方法
2013/03/13 PHP
php根据分类合并数组的方法实例详解
2013/11/06 PHP
使用PHP和HTML5 FormData实现无刷新文件上传教程
2014/09/06 PHP
thinkphp中U方法按路由规则生成url的方法
2018/03/12 PHP
解决laravel中日志权限莫名变成了root的问题
2019/10/17 PHP
jQuery1.3.2 升级到jQuery1.4.4需要修改的地方
2011/01/06 Javascript
基于jquery的jqDnR拖拽溢出的修改
2011/02/12 Javascript
Ext.get() 和 Ext.query()组合使用实现最灵活的取元素方式
2011/09/26 Javascript
减少访问DOM的次数提升javascript性能
2014/02/24 Javascript
使用GruntJS构建Web程序之Tasks(任务)篇
2014/06/06 Javascript
使用javascript实现json数据以csv格式下载
2015/01/09 Javascript
JavaScript获取URL汇总
2015/06/08 Javascript
jQuery垂直多级导航菜单代码分享
2015/08/18 Javascript
Three.js获取鼠标点击的三维坐标示例代码
2017/03/24 Javascript
详解React-Native解决键盘遮挡问题(Keyboard遮挡问题)
2017/07/13 Javascript
JavaScript进阶(三)闭包原理与用法详解
2020/05/09 Javascript
[05:31]DOTA2上海特级锦标赛主赛事第三日RECAP
2016/03/05 DOTA
python实现socket客户端和服务端简单示例
2014/02/24 Python
详解Django中的form库的使用
2015/07/18 Python
windows下ipython的安装与使用详解
2016/10/20 Python
python2与python3的print及字符串格式化小结
2018/11/30 Python
Mac 使用python3的matplot画图不显示的解决
2019/11/23 Python
Python之Class&Object用法详解
2019/12/25 Python
python实现密度聚类(模板代码+sklearn代码)
2020/04/27 Python
python 基于卡方值分箱算法的实现示例
2020/07/17 Python
python搜索算法原理及实例讲解
2020/11/18 Python
特罗佩亚包官方网站:Tropea
2017/01/03 全球购物
英国男女奢华内衣和泳装购物网站:Figleaves
2017/01/28 全球购物
.net笔试题
2014/03/03 面试题
体育教育个人自荐信范文
2013/12/01 职场文书
高中生学习的自我评价
2013/12/14 职场文书
小学课外阅读总结
2014/07/09 职场文书
高中生旷课检讨书
2014/10/08 职场文书
群众路线教育实践活动整改落实情况汇报
2014/10/28 职场文书