怎么在Vue中使用Components實現一個數字鍵盤

怎么在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();
   }

關于怎么在Vue中使用Components實現一個數字鍵盤問題的解答就分享到這里了，希望以上內容可以對大家有一定的幫助，如果你還有很多疑惑沒有解開，可以關注億速云行業資訊頻道了解更多相關知識。