Vue Components 數字鍵盤的實現(xiàn)

更新時間：2019年09月18日 11:34:04 作者：juststart_LIC

這篇文章主要介紹了Vue Components 數字鍵盤的實現(xiàn)，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧

本文介紹了Vue Components 數字鍵盤的實現(xiàn)，分享給大家，具體如下：

項目地址點擊查看

項目演示點擊查看

首先監(jiān)聽所有的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可視區(qū)域
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可視區(qū)域
    inputTarget.blur();
    inputTarget.focus();
   }

在刪除數字和添加數字后要讓input失去焦點在獲取焦點，不然光標會在最后而不是在input的可視區(qū)域，這樣子會看不到輸入的值,具體可以查看項目。

以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章: