Project address Click to view
Project demonstration Click to view

1. First, listen for all inputs, turn up the digital keyboard when the input is focused, and use getBounding ClientRect to determine the position of the input so that the digital keyboard is near the input, and hide the digital keyboard when the input is out of focus.

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

2. Prevent default events and input from losing focus when clicking on the keyboard.

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

3. When you click on the keyboard, you can get the number of clicks according to the event delegation. Then you can get the focus in the input according to the selectionStart and selectionEnd, insert the number in the keyboard into the focus, and move the focus to the right.

   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);
   //A decimal point and no decimal point at the beginning
   inputTarget.value = inputTarget.value.replace(/^\./g, "");
   inputTarget.value = inputTarget.value
     .replace(".", "$#$")
     .replace(/\./g, "")
     .replace("$#$", ".");
   inputTarget.selectionStart = Pointstart + 1;
   inputTarget.selectionEnd = Pointstart + 1;
   //Let the cursor appear in the input visual area
   inputTarget.blur();
   inputTarget.focus();

4. When you click the delete key, delete the number at the cursor, and finally move the cursor to the right.

   if (e.target.className == "numberTD" &&
       e.target.innerText == "←" &&
       //When PointEnd==0, the value of the entire input is copied
       PointEnd != 0
       ) {
           inputTarget.value =
             inputTarget.value.slice(0, Pointstart - 1) +
             inputTarget.value.slice(PointEnd, wordLength);
           inputTarget.selectionStart = Pointstart - 1;
           inputTarget.selectionEnd = Pointstart - 1;
           //Let the cursor appear in the input visual area
           inputTarget.blur();
           inputTarget.focus();
         }

5. After deleting and adding numbers, let input lose focus and get focus. Otherwise, the cursor will be in the last visible area of input, so that the input value will not be seen. Specifically, it can be used. View items.