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动态创建Table,Tr,Td并赋值的具体实现
Jul 05 Javascript
判断文档离浏览器顶部的距离的方法
Jan 08 Javascript
js父窗口关闭时子窗口随之关闭完美解决方案
Apr 29 Javascript
AngularJS中取消对HTML片段转义的方法例子
Jan 04 Javascript
jQuery左侧大图右侧小图焦点图幻灯切换代码分享
Aug 19 Javascript
js阻止浏览器默认行为触发的通用方法(推荐)
May 15 Javascript
浅析Jquery操作select
Dec 13 Javascript
原生JS实现几个常用DOM操作API实例
Jan 19 Javascript
vue如何引用其他组件(css和js)
Apr 13 Javascript
详解js静态检查工具eslint配置文件
Nov 23 Javascript
JS异步宏队列与微队列原理区别详解
Jul 02 Javascript
js实现星星海特效的示例
Sep 28 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 SQL防注入代码集合
2008/04/25 PHP
Thinkphp使用mongodb数据库实现多条件查询方法
2014/06/26 PHP
mantis安装、配置和使用中的问题小结
2014/07/14 PHP
PHP迭代器和生成器用法实例分析
2019/09/28 PHP
php实现根据身份证获取精准年龄
2020/02/26 PHP
JavaScript函数、方法、对象代码
2008/10/29 Javascript
悄悄用脚本检查你访问过哪些网站的代码
2010/12/04 Javascript
jquery select(列表)的操作(取值/赋值)
2011/03/16 Javascript
append和appendTo的区别以及appendChild用法
2013/12/24 Javascript
用js控制组织结构图可以任意拖拽到指定位置
2014/01/17 Javascript
用javascript关闭本窗口技巧小结
2014/09/05 Javascript
js判断手机和pc端选择不同执行事件的方法
2015/01/30 Javascript
jQuery热气球动画半透明背景的后台登录界面代码分享
2015/08/28 Javascript
轻松学习jQuery插件EasyUI EasyUI创建菜单与按钮
2015/11/30 Javascript
纯JavaScript代码实现文本比较工具
2016/02/17 Javascript
JQuery PHP图片在线裁剪实例
2020/07/27 Javascript
bootstrap实现的自适应页面简单应用示例
2017/03/09 Javascript
JS中Attr的用法详解
2017/10/09 Javascript
node.js的http.createServer过程深入解析
2019/06/06 Javascript
js实现九宫格布局效果
2020/05/28 Javascript
如何手写一个简易的 Vuex
2020/10/10 Javascript
Python中import导入上一级目录模块及循环import问题的解决
2016/06/04 Python
python机器学习实战之最近邻kNN分类器
2017/12/20 Python
Windows下Anaconda的安装和简单使用方法
2018/01/04 Python
VSCode下配置python调试运行环境的方法
2018/04/06 Python
详解Python如何生成词云的方法
2018/06/01 Python
python3 kmp 字符串匹配的方法
2018/07/07 Python
python调用虹软2.0第三版的具体使用
2019/02/22 Python
解决import tensorflow导致jupyter内核死亡的问题
2021/02/06 Python
纯CSS实现设置半个字符的样式
2014/07/03 HTML / CSS
写一个方法,输入一个文件名和一个字符串,统计这个字符串在这个文件中出现的次数
2016/04/13 面试题
幼儿园中班上学期评语
2014/04/18 职场文书
教师三严三实对照检查材料
2014/09/25 职场文书
酒店财务总监岗位职责
2015/04/03 职场文书
小平小道观后感
2015/06/09 职场文书
小学学习委员竞选稿
2015/11/20 职场文书