커서가 입력 태그에서 작동하지 않습니다.

입력 태그에 전화 번호 마스크를 만들려고합니다. 내 코드에 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 또는 https://stackoverflow.com/a/37741956/4248328 또는 https://stackoverflow.com/ a/28773741/4248328 or https://stackoverflow.com/a/35305832/4248328 –

mask $ ('# 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

커서가 입력 태그에서 작동하지 않습니다.

답변

관련 문제