Question

我在android浏览器/ webview上遇到了一个奇怪的行为。我正在测试一个输入，它将自动格式化为电话号码格式“（xxx）xxx-xxxx”。但后来发生的事情是当我点击或按下机器人键盘上的任何数字时，第一个输入就像这样“（x”但光标位于“（和”x“之间）。是否有办法将光标放在“x”值？

我在iPhone和Windows网络浏览器上进行了测试，效果很好。如果我的jquery或javascripts有错误，请告诉我。

由于

HTML CODE：

<html>
    <head> 
        <title>Sample Phone Number Format</title>
        <script type="text/javascript" src="http://code.jquery.com/jquery-1.8.2.min.js"></script>
    </head>
    <body>
        <input type="text" id="phone" /> 

        <script type="text/javascript">
            $('#phone').on('keydown', function (event) {

                objval = $(this).val();
                if (event.keyCode == 46 || event.keyCode == 8) {} else {
                    if (!((event.keyCode > 47 && event.keyCode < 58) || (event.keyCode > 95 && event.keyCode < 106) || (objval.length > 13))) {
                        event.preventDefault();
                    } else {
                        if (objval.length == 0) {
                            $(this).val(objval + '(');
                            alert(objval + '(');
                        } else if (objval.length == 4) {
                            $(this).val(objval + ') ');
                            alert(objval + ') ');
                        } else if (objval.length == 9) {
                            $(this).val(objval + '-');
                            alert(objval + '-');
                        } else if (objval.length >= 14) {
                            if (event.keyCode == 9) {
                                return;
                            } else {
                                event.preventDefault();
                            }
                        }
                    }
                }
            });

            $('#phone').on('keydown', function (event) {

                var objVal = $(this).val();
                if(objVal.length < 14)
                {
                    validateCallerForm(objVal + String.fromCharCode((96 <= event.keyCode && event.keyCode <= 105)? event.keyCode-48 : event.keyCode));
                }
            });

            //Validates proper phone format, true if valid phone number, false otherwise
            function isValidPhoneNumber(elementValue) {
                var numberPattern = /^\(?(\d{3})\)?[- ]?(\d{3})[- ]?(\d{4})$/;
                return numberPattern.test(elementValue);
            }

            //validates entire caller form, also updates css classes for proper response
            function validateCallerForm(PhoneNumber) {

                if (isValidPhoneNumber(PhoneNumber)) {
                    alert("true");
                } else {
                    alert("false");
                }

            }
        </script>
    </body>
</html>

给予谁+50赏金给谁正确回答

Answer 1

你必须首先定义用于键入和复制粘贴的监听器，如下所示（不是必需的）：

$("#phone").keyup( function() {
    maskLine(this);
});
$("#phone").change( function() {
    maskLine(this);
});

然后，要管理光标放置，您必须缓存以前的电话号码，然后，您可以根据需要比较差异和更新光标位置。所以声明，你必须声明一个像这样的全局数组：

var _cacheElementValues = new Array();

最后，你可以检查下面的功能，它将你的面具应用到电话号码字段并管理光标位置：

function maskLine( element ) {
    element = $(element);
    var maskedLine = '';
    var line = element.attr('value');

    // check the cache of the input and abord if no change since last treatment
    if (_cacheElementValues[element.attr('id')] != undefined && _cacheElementValues[element.attr('id')] == line) {
        return;
    }
    line = line.replace(/\D/g, ''); // remove all characters != digits
    line = line.substring(0, 10);
    if (line != '') {
        // apply mask
        if (line.length <= 2 ) {
            maskedLine = "(" + line;
        } else if (line.length < 6) {
            maskedLine = line.replace(/^([0-9]{3})([0-9]{0,3})/g, '($1) $2');
        } else {
            // mask : '(XXX) XXX-XXXX'
            maskedLine = line.replace(/^([0-9]{3})([0-9]{3})([0-9]{0,4})/g, '($1) $2-$3');
        }        
    }

    // define cursor position at the end of the input by default
    var pos = maskedLine.length;

    // Change cursor placement if necessary
    if (typeof element[0].selectionStart != 'undefined') {
        var start = element[0].selectionStart;
        var end   = element[0].selectionEnd;
        var insText = element[0].value.substring(start, end);

        // get current cursor placement
        if (insText.length == 0) {
            pos = start;
        } else {
            pos = start + insText.length;
        }

        // find how many digits typing since last mask application
        var previousLength = 0;
        if (_cacheElementValues[element.attr('id')] != undefined) {
            previousLength = _cacheElementValues[element.attr('id')].replace(/\s/g, '').length;
        }
        var diff = maskedLine.replace(/\s/g, '').length - previousLength;

        // if sum of new typing digit is > 0 : we change cursor placement
        if (diff > 0) {
            pos += (diff - 1) + Math.round((diff-1)/3);
            if (pos%6 == 0 && maskedLine.length >= pos+1) pos++;
        }
    }

    // update input data & cache
    element.val(maskedLine);
    _cacheElementValues[element.attr('id')] = maskedLine;

    // update cursor placement
    element[0].selectionStart = element[0].selectionEnd = pos;    
}

您可以在jsFiddle上找到此示例：http://jsfiddle.net/UE9LB/5/

我希望这个小解释可以解决你的问题;）享受！

ps：我为我可怜的英语道歉：s

Answer 2

我建议至少从现有的插件开始，而不是通过你自己的孤立解决问题。

http://digitalbush.com/projects/masked-input-plugin/

https://github.com/igorescobar/jQuery-Mask-Plugin

Answer 3

简短的回答是设置输入元素的selectionStart和selectionEnd属性。格式化值后，将这些属性设置为this.value.length。

this.selectionStart = this.value.length;
this.selectionEnd = this.value.length;

但是，当你遇到麻烦的时候，光标不在文本的末尾。例如，用户已手动将光标定位到文本内的位置。为防止光标跳到最后，您需要在格式化输入之前检测光标位置，然后在格式化后将光标放回适当的位置。

编辑： This jsFiddle可能会让您入门，但还不完美。

Answer 4

我在#phone keydown事件上重写代码，这将适用于iPhone，Android，webkit浏览器。

$('#phone').on('keydown', function (event) {
    if (event.keyCode == 8 || event.keyCode == 37 || event.keyCode == 39) {
        // ignore if BKSPCE, left arrow, or right arrow
    } else {
        // validate if anything else
        inputval = $(this).val();
        var string = inputval.replace(/[^0-9]/g, "");
        var first3 = string.substring(0,3);
        var next3 = string.substring(3,6);
        var next4 = string.substring(6,10);
        var string = ("(" + first3 + ") " + next3 + "-" + next4);
        $(this).val(string);
    }
});

数字格式的Jquery keydown（）在android webview上无法正常工作

4 个答案: