2

androidブラウザ/webviewで奇妙な動作に遭遇しました。電話番号形式「（xxx）xxx-xxxx」に自動的にフォーマットされる入力をテストしていました。しかし、Androidキーボードで任意の数字をタップまたは押すと、最初の入力は「（x」」のようになりましたが、カーソルは「（」と「x」の間にありました。カーソルを後に置く方法はありますか？ 「x」値？

私はこれをiPhoneとWindowsのWebブラウザーでテストしましたが、正常に動作します。jqueryまたはjavascriptsに間違いがある場合はお知らせください。

ありがとう

HTMLコード：

<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の報奨金を与えるとこれに正しく答えます

4

4 に答える 4

0

問題を解決するための独自の個別のラウンドを実行するのではなく、少なくとも既存のプラグインから開始することをお勧めします。

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

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

于 2012-09-26T12:20:37.033 に答える
0

最初に、以下のように入力とコピー＆ペーストのリスナーを定義する必要があります（必須ではありません）：

$("#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

于 2012-09-25T09:56:20.093 に答える
0

簡単な答えは、入力要素のプロパティselectionStartとプロパティを設定することです。selectionEnd値をフォーマットした後、これらのプロパティをに設定しますthis.value.length。

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

ただし、問題が発生するのは、カーソルがテキストの最後にない場合です。たとえば、ユーザーが手動でカーソルをテキスト内の位置に配置しました。カーソルが最後までジャンプしないようにするには、入力をフォーマットする前にカーソルの位置を検出し、フォーマット後にカーソルを適切な位置に戻す必要があります。

編集： このjsFiddleはあなたを始めるかもしれませんが、まだ完璧ではありません。

于 2012-10-01T19:44:10.370 に答える
0

#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);
    }
});
于 2012-10-29T02:55:21.147 に答える