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に従って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の視認領域ではなく、このように入力の値が見えなくなります.具体的に項目を見ることができます.