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 相关文章推荐
jquery一句话全选/取消全选
Mar 01 Javascript
计算世界完全对称日的js代码,粗糙版
Nov 04 Javascript
JQuery魔力之$("tagName")与selector
Mar 05 Javascript
JavaScript中的逻辑判断符&&、||与!介绍
Dec 31 Javascript
Node.js 异步编程之 Callback介绍(一)
Mar 30 Javascript
jQuery中使用each处理json数据
Apr 23 Javascript
jQuery实现标题有打字效果的焦点图代码
Nov 16 Javascript
Vue 2.0 服务端渲染入门介绍
Mar 29 Javascript
浅谈js基础数据类型和引用类型,深浅拷贝问题,以及内存分配问题
Sep 02 Javascript
vue input输入框模糊查询的示例代码
May 22 Javascript
Vue2.x通用编辑组件的封装及应用详解
May 28 Javascript
关于vue路由缓存清除在main.js中的设置
Nov 06 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 静态变量的初始化
2009/11/15 PHP
php数组函数序列之array_unique() - 去除数组中重复的元素值
2011/10/29 PHP
PHP在线打包下载功能示例
2016/10/15 PHP
php获取flash尺寸详细数据的方法
2016/11/12 PHP
JavaScript中的new的使用方法与注意事项
2007/05/16 Javascript
简单的Jquery遮罩层代码实例
2013/11/14 Javascript
js如何设置在iframe框架中指定div不显示
2013/12/04 Javascript
JS如何实现文本框随文本的长度而增长
2015/07/30 Javascript
JSONP跨域请求实例详解
2016/07/04 Javascript
AngularJS 过滤与排序详解及实例代码
2016/09/14 Javascript
jQuery判断是否存在滚动条的简单方法
2016/09/17 Javascript
jQuery中 bind的用法简单介绍
2017/02/13 Javascript
JS原型继承四步曲及原型继承图一览
2017/11/28 Javascript
vue组件发布到npm简单步骤
2017/11/30 Javascript
JavaScript设计模式之工厂模式简单实例教程
2018/07/03 Javascript
vue+element的表格实现批量删除功能示例代码
2018/08/17 Javascript
vue 使用html2canvas将DOM转化为图片的方法
2018/09/11 Javascript
ES6入门教程之变量的解构赋值详解
2019/04/13 Javascript
JS实现canvas简单小画板功能
2020/06/23 Javascript
python正则表达式判断字符串是否是全部小写示例
2013/12/25 Python
django项目搭建与Session使用详解
2018/10/10 Python
Python+opencv 实现图片文字的分割的方法示例
2019/07/04 Python
详解python 降级到3.6终极解决方案
2020/02/06 Python
python基于openpyxl生成excel文件
2020/12/23 Python
使用canvas压缩图片大小的方法示例
2019/08/02 HTML / CSS
美国领先的宠物用品和宠物食品零售商:Petco
2020/10/28 全球购物
雅虎笔试题(字符串操作)
2015/03/24 面试题
护士自我鉴定范文
2013/10/06 职场文书
酒店拾金不昧表扬信
2014/01/18 职场文书
家长给孩子的评语
2014/01/30 职场文书
乡镇办公室工作决心书
2014/03/11 职场文书
广告艺术设计专业自荐书
2014/07/08 职场文书
先进工作者申报材料
2014/12/23 职场文书
宾馆卫生管理制度
2015/08/06 职场文书
HTML页面滚动时部分内容位置固定不滚动的实现
2021/04/14 HTML / CSS
SQL Server Agent 服务无法启动
2022/04/20 SQL Server