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 相关文章推荐
$()JS小技巧
Jul 21 Javascript
javascript 类定义的4种方法
Sep 12 Javascript
Json和Jsonp理论实例代码详解
Nov 15 Javascript
JavaScript利用构造函数和原型的方式模拟C#类的功能
Mar 06 Javascript
jquery 绑定回车动作扑捉回车键触发的事件
Mar 26 Javascript
AngularJS中的模块详解
Jan 29 Javascript
JS实现跟随鼠标闪烁转动色块的方法
Feb 26 Javascript
详解JavaScript中的4种类型识别方法
Sep 14 Javascript
jQuery如何跳转到另一个网页 就这么简单
Dec 28 Javascript
基于复选框demo(分享)
Sep 27 Javascript
解决LayUI表单获取不到data的问题
Aug 20 Javascript
8 个有用的JS技巧(推荐)
Jul 03 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实现图片等比例放大和缩小的方法详解
2013/06/06 PHP
PHP使用GIFEncoder类处理gif图片实例
2014/07/01 PHP
PHP计算数组中值的和与乘积的方法(array_sum与array_product函数)
2016/04/01 PHP
php实现批量删除挂马文件及批量替换页面内容完整实例
2016/07/08 PHP
解读IE和firefox下JScript和HREF的执行顺序
2008/01/12 Javascript
js更优雅的兼容
2010/08/12 Javascript
javascript消除window.close()的提示窗口
2015/05/20 Javascript
js实现键盘Enter键提交表单的方法
2015/05/27 Javascript
js获取及判断键盘按键的方法
2015/12/01 Javascript
基于JavaScript实现TAB标签效果
2016/01/12 Javascript
jQuery实现滚动鼠标放大缩小图片的方法(附demo源码下载)
2016/03/05 Javascript
基于javascript实现tab选项卡切换特效调试笔记
2016/03/30 Javascript
JS常用算法实现代码
2016/11/14 Javascript
jquery实现超简单的瀑布流布局【推荐】
2017/03/08 Javascript
详解express与koa中间件模式对比
2017/08/07 Javascript
浅谈基于Vue.js的移动组件库cube-ui
2017/12/20 Javascript
vue与原生app的对接交互的方法(混合开发)
2018/11/28 Javascript
JavaScript惰性求值的一种实现方法示例
2019/01/11 Javascript
Vue移动端用淘宝弹性布局lib-flexible插件做适配的方法
2020/05/26 Javascript
python实现读取命令行参数的方法
2015/05/22 Python
利用python微信库itchat实现微信自动回复功能
2017/05/18 Python
python下实现二叉堆以及堆排序的示例
2017/09/29 Python
Java编程迭代地删除文件夹及其下的所有文件实例
2018/02/10 Python
Python OrderedDict字典排序方法详解
2020/05/21 Python
解析浏览器的一些“滚动”行为鉴赏
2019/09/16 HTML / CSS
环法自行车赛官方商店:Le Tour de France
2017/08/27 全球购物
建筑自我鉴定
2013/10/19 职场文书
人口与计划生育目标管理责任书
2014/07/29 职场文书
干部作风整顿自我剖析材料和整改措施
2014/09/18 职场文书
中学生的1000字检讨书
2014/10/11 职场文书
单位委托书
2014/10/15 职场文书
2015学校年度工作总结
2015/05/11 职场文书
工程款申请报告
2015/05/15 职场文书
中学教师读书笔记
2015/07/01 职场文书
区域销售大会开幕词
2016/03/04 职场文书
MySQL中几种插入和批量语句实例详解
2021/09/14 MySQL