入力タグでカーソルが機能しない

入力タグに電話番号マスクを作成しようとしています。これは私のコードに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）数字を入力しました。 2）この数字は、現場の正しい場所に現れました。 3）カーソルが入力フィールドの最後の位置に移動しました。 4）その後、キーボードのキーを押したまま - 左矢印と右矢印 - カーソルが正しく動かない。

カーソルが機能しない理由は何ですか？

出典

2017-05-24 Max

https://stackoverflow.com/a/41426991/4248328 OR https://stackoverflow.com/a/37741956/4248328 OR https://stackoverflow.com/ a/28773741/4248328またはhttps://stackoverflow.com/a/35305832/4248328 –

マスク$（ '＃number_phone'）を使用してください。マスク（ "（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

入力タグでカーソルが機能しない

答えて

関連する問題