怎么在Vue中使用Components實(shí)現(xiàn)一個(gè)數(shù)字鍵盤

怎么在Vue中使用Components實(shí)現(xiàn)一個(gè)數(shù)字鍵盤？針對(duì)這個(gè)問題，這篇文章詳細(xì)介紹了相對(duì)應(yīng)的分析和解答，希望可以幫助更多想解決這個(gè)問題的小伙伴找到更簡單易行的方法。

成都創(chuàng)新互聯(lián)公司2013年成立，先為淇濱等服務(wù)建站，淇濱等地企業(yè)，進(jìn)行企業(yè)商務(wù)咨詢服務(wù)。為淇濱企業(yè)網(wǎng)站制作PC+手機(jī)+微官網(wǎng)三網(wǎng)同步一站式服務(wù)解決您的所有建站問題。

首先監(jiān)聽所有的input，有input聚焦時(shí)調(diào)起數(shù)字鍵盤，通過getBoundingClientRect判斷input位置讓數(shù)字鍵盤在input附近，失去焦點(diǎn)后則隱藏?cái)?shù)字鍵盤

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";
   });
  });

點(diǎn)擊小鍵盤時(shí)阻止默認(rèn)事件，阻止input失去焦點(diǎn)。

BoardNumberKeyDown(e) {
   if (e && e.preventDefault) {
    e.preventDefault();
   } else {
    window.event.returnValue = false;
    return false;
   }
  },

點(diǎn)擊小鍵盤時(shí)，根據(jù)事件委托，得出點(diǎn)擊的數(shù)字，然后根據(jù)selectionStart，selectionEnd獲取input中的焦點(diǎn)，將小鍵盤中的數(shù)字插入焦點(diǎn)處，最后焦點(diǎn)右移一位。

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);
//一個(gè)小數(shù)點(diǎn)和開頭不能有小數(shù)點(diǎn)
inputTarget.value = inputTarget.value.replace(/^\./g, "");
inputTarget.value = inputTarget.value
 .replace(".", "$#$")
 .replace(/\./g, "")
 .replace("$#$", ".");
inputTarget.selectionStart = Pointstart + 1;
inputTarget.selectionEnd = Pointstart + 1;
//讓光標(biāo)顯示在input可視區(qū)域
inputTarget.blur();
inputTarget.focus();

點(diǎn)擊刪除鍵時(shí)，刪除光標(biāo)處數(shù)字，最后光標(biāo)右移。

if (e.target.className == "numberTD" &&
  e.target.innerText == "←" &&
  //PointEnd==0時(shí)會(huì)復(fù)制整個(gè)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;
    //讓光標(biāo)顯示在input可視區(qū)域
    inputTarget.blur();
    inputTarget.focus();
   }

關(guān)于怎么在Vue中使用Components實(shí)現(xiàn)一個(gè)數(shù)字鍵盤問題的解答就分享到這里了，希望以上內(nèi)容可以對(duì)大家有一定的幫助，如果你還有很多疑惑沒有解開，可以關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道了解更多相關(guān)知識(shí)。

標(biāo)題名稱：怎么在Vue中使用Components實(shí)現(xiàn)一個(gè)數(shù)字鍵盤
瀏覽路徑：http://muchs.cn/article24/gjchce.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供小程序開發(fā)、網(wǎng)站策劃、App設(shè)計(jì)、網(wǎng)站制作、App開發(fā)、網(wǎng)頁設(shè)計(jì)公司

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來源： 創(chuàng)新互聯(lián)