快捷導(dǎo)航

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

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

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

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

項(xiàng)目地址點(diǎn)擊查看

項(xiàng)目演示點(diǎn)擊查看

首先監(jiān)聽(tīng)所有的input，有input聚焦時(shí)調(diào)起數(shù)字鍵盤，通過(guò)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)和開(kāi)頭不能有小數(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();
   }

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

以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章: