光標在輸入標籤中不起作用

我嘗試在輸入標籤中設置電話號碼掩碼。這是我的代碼http://jsbin.com/hibuyus/edit?html,output。光標在輸入標籤中不起作用

<!DOCTYPE HTML> 

<html> 

<head> 
    <title>Untitled</title> 
    <meta charset="utf-8"> 
</head> 

<body> 
    <input id="phone" type="text" value="+7 (___) ___ __ __" size="18"> 
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script> 
    <script> 
     $(document).ready(function($) { 
      var inputPhone = $("#phone"), 
       // cashedValue = "+7 (___) ___ __ __"; 
       cashedValue = { 
           4: '_', 
           5: '_', 
           6: '_', 
           9: '_', 
           10: '_', 
           11: '_', 
           13: '_', 
           14: '_', 
           16: '_', 
           17: '_' 
          }, 
       indexes = [4, 5, 6, 9, 10, 11, 13, 14, 15, 16]; 
      inputPhone.on('keydown', function(event) { 
       console.log(event); 
       var $this = $(this); 
       if (event.key != "ArrowLeft" && event.key != "ArrowRight"){ 
        event.preventDefault(); 
       } 
       console.log("keyCode =", event.key, '(', event.keyCode, ')'); 
       var defaultValue = this.defaultValue, 
        cursorPosition = event.target.selectionStart, 
        keyCode = event.keyCode; 
       console.log("cursorPosition =", cursorPosition); 
       if (48 <= keyCode && keyCode <= 57) { 
        if (cursorPosition < 4) { 
         cashedValue[4] = event.key; 
        } else if (4 <= cursorPosition && cursorPosition < 7) { 
         cashedValue[cursorPosition] = event.key; 
        } else if (cursorPosition == 7 || cursorPosition == 8) { 
         cashedValue[9] = event.key; 
        } else if (9 <= cursorPosition && cursorPosition < 12) { 
         cashedValue[cursorPosition] = event.key; 
        } else if (cursorPosition == 12) { 
         cashedValue[13] = event.key; 
        } else if (cursorPosition == 13 || cursorPosition == 14) { 
         cashedValue[cursorPosition] = event.key; 
        } else if (cursorPosition == 15) { 
         cashedValue[16] = event.key; 
        } else if (cursorPosition == 16 || cursorPosition == 17) { 
         cashedValue[cursorPosition] = event.key; 
        } else { 
         return false; 
        } 
       } 
       console.log("cashedValue =", cashedValue); 
       console.log("inputPhone =", inputPhone); 
       console.log("$this =", $this); 
       event.target.value = "+7 (" + cashedValue[4] + cashedValue[5] + cashedValue[6] + ") " + cashedValue[9] + cashedValue[10] + cashedValue[11] + " " + cashedValue[13] + cashedValue[14] + " " + cashedValue[16] + cashedValue[17]; 
       // if ($this.setSelectionRange) { 
       //  $this.setSelectionRange(0,0); 
       // } else if ($this.createTextRange) { 
       //  range = $this.createTextRange(); 
       //  range.collapse(true); 
       //  range.moveEnd('character', 0); 
       //  range.moveStart('character', 0); 
       //  range.select(); 
       // } 
      }); 
     }); 
    </script> 
</body> 

</html>

的問題是： 1）I inputed標號。 2）數字出現在正確的地方。 3）光標移到輸入欄的最後一個位置。 4）然後我按下鍵盤上的按鍵 - 左箭頭和右箭頭 - 但光標不能正確移動。

問題是什麼，爲什麼光標不起作用？

來源

2017-05-24 Max

https://stackoverflow.com/a/41426991/4248328或https://stackoverflow.com/a/37741956/4248328或https://stackoverflow.com/ a/28773741/4248328或https://stackoverflow.com/a/35305832/4248328 –

使用掩碼$（'＃number_phone'）。mask（「（000）000 00 00」）; –

光標始終移動到最後位置的問題發生在event.target.value被重置的最後一條語句中。當瀏覽器執行此操作時，它將光標移動到最後一個位置。還要注意，按下左或右箭頭鍵時也會執行此行。爲了防止這種情況發生：
1）檢查按鍵是否爲ArrowLeft或ArrowRight。如果是停止功能。
2）更改輸入值後，將光標移回到正確的位置。

下面是一個帶有調整的示例代碼。

<!DOCTYPE HTML> 

<html> 

    <head> 
    <title>Untitled</title> 
    <meta charset="utf-8"> 
    </head> 

    <body> 
    <input id="phone" type="text" value="+7 (___) ___ __ __" size="18"> 
    <script 
     src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script> 
<script> 
    $(document).ready(function($) { 
     var inputPhone = $("#phone"), 
      // cashedValue = "+7 (___) ___ __ __"; 
      cashedValue = { 
          4: '_', 
          5: '_', 
          6: '_', 
          9: '_', 
          10: '_', 
          11: '_', 
          13: '_', 
          14: '_', 
          16: '_', 
          17: '_' 
         }, 
      indexes = [4, 5, 6, 9, 10, 11, 13, 14, 15, 16]; 
     inputPhone.on('keydown', function(event) { 
      console.log(event); 
      var $this = $(this); 
      if (event.key != "ArrowLeft" && event.key != "ArrowRight"){ 
       event.preventDefault(); 
      } 
      // If left or right keys, stop function, normal stuff will happen 
      if (event.key == "ArrowLeft" || event.key == "ArrowRight"){ 
       return; 
      } 
      console.log("keyCode =", event.key, '(', event.keyCode, ')'); 
      var defaultValue = this.defaultValue, 
       cursorPosition = event.target.selectionStart, 
       keyCode = event.keyCode; 
      console.log("cursorPosition =", cursorPosition); 
      if (48 <= keyCode && keyCode <= 57) { 
       if (cursorPosition < 4) { 
        cashedValue[4] = event.key; 
       } else if (4 <= cursorPosition && cursorPosition < 7) { 
        cashedValue[cursorPosition] = event.key; 
       } else if (cursorPosition == 7 || cursorPosition == 8) { 
        cashedValue[9] = event.key; 
       } else if (9 <= cursorPosition && cursorPosition < 12) { 
        cashedValue[cursorPosition] = event.key; 
       } else if (cursorPosition == 12) { 
        cashedValue[13] = event.key; 
       } else if (cursorPosition == 13 || cursorPosition == 14) { 
        cashedValue[cursorPosition] = event.key; 
       } else if (cursorPosition == 15) { 
        cashedValue[16] = event.key; 
       } else if (cursorPosition == 16 || cursorPosition == 17) { 
        cashedValue[cursorPosition] = event.key; 
       } else { 
        return false; 
       } 
      } 
      console.log("cashedValue =", cashedValue); 
      console.log("inputPhone =", inputPhone); 
      console.log("$this =", $this); 
      event.target.value = "+7 (" + cashedValue[4] + cashedValue[5] + cashedValue[6] + ") " + cashedValue[9] + cashedValue[10] + cashedValue[11] + " " + cashedValue[13] + cashedValue[14] + " " + cashedValue[16] + cashedValue[17]; 
      // Move cursor back since the browser moved it when new input value was changed 
      event.target.selectionStart = ++cursorPosition; 
      event.target.selectionEnd = cursorPosition; 
     }); 
    }); 
</script>

來源

2017-05-24 08:32:38 yovsky

它工作得很好。謝謝你的幫助！ – Max

光標在輸入標籤中不起作用

回答

相關問題