Question

我尝试在输入标签中制作电话号码掩码。这是我的代码的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）然后我按下键盘上的键 - 左箭头和右箭头 - 但光标没有正确移动。

问题是什么，光标为什么不起作用？

Answer 1

由于重置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>

光标在输入标记

1 个答案: