光标在输入标签中不起作用

我尝试在输入标签中设置电话号码掩码。这是我的代码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

光标在输入标签中不起作用

回答

相关问题