1

私は、(米国の) 電話番号を入力時に次の形式でフォーマットするカスタムbindingHandlerを書いています。knockout

(xxx) xxx - xxxx

HTML コード...

 <input type="text" data-bind="phoneNumber: phone" />

そしてバインディングハンドラー...

 ko.bindingHandlers.phoneNumber = {
    init: function(element, valueAccessor, allBindings) {
        ko.bindingHandlers.value.init(element,valueAccessor, allBindings);
        },    
    update: function(element, valueAccessor) {
        var phone = ko.utils.unwrapObservable(valueAccessor());
        if (!phone) return;
        var output;
        input = phone;
        input = input.replace(/[^0-9]/g, '');
        var areaCode = input.substr(0, 3);
        var nextThreeDigits = input.substr(3, 3);
        var lastFourDigits = input.substr(6, 4); 

        if (areaCode.length < 3) {
            output = "(" + areaCode;
        } else if (areaCode.length == 3 && nextThreeDigits.length < 3) {
          output = "(" + areaCode + ")" + " " + nextThreeDigits;
        } else if (areaCode.length == 3 && nextThreeDigits.length == 3) {
          output = "(" + areaCode + ")" + " " + nextThreeDigits + "-" + lastFourDigits;
        }

        var phoneObs = valueAccessor();
        phoneObs(output);
    }
};

次のコードは期待どおりに機能します。このアプローチの 1 つのフローは、を使用して電話番号を削除することbackspaceです。最後の 4 桁を削除してヒットすると、長さに基づいてandを動的に追加しているため、 norを-削除できません。矢印キーを使用するか、それらの記号の前をクリックして削除を開始するか、テキスト ボックスを強調表示して一度にすべて削除することができます。しかし、バックスペースまたはシミュレートによってシンボルを削除し、コードから動的に削除できる必要があります。-( )-( )

この問題を解決する方法について何か提案はありますか?

アップデート

これがJSFIDDLEです。このフィドルで私が抱えている唯一の問題は、値の変更時に値が更新されないことです。Enterキーを押すか、テキストボックスを離れた場合にのみ更新されます。他に何か欠けているかどうかはわかりません...

発生している問題を説明するためにロジックを更新しましたが、修正されました。しかし、どちらのロジックにももう 1 つ問題があることに気付きました。

電話番号があれば

(123) 456-7890

市外局番から 1 を削除すると、カーソルは同じ場所 (2 の前) にとどまりません。文字列の最後に移動し、すべてが 1 桁下にシフトします。

if (areaCode.length <= 3 && nextThreeDigits == "") {
    output = "(" + areaCode;
} else if (areaCode.length == 3 && nextThreeDigits < 3) {
    output = "(" + areaCode + ")" + " " + nextThreeDigits;
} else if (areaCode.length == 3 && nextThreeDigits.length <= 3 && lastFourDigits.length == "") {
    output = "(" + areaCode + ")" + " " + nextThreeDigits;
} else if (areaCode.length == 3 && nextThreeDigits.length == 3 && lastFourDigits.length <= 4) {
  output = "(" + areaCode + ")" + " " + nextThreeDigits + "-" + lastFourDigits;
}
4

2 に答える 2

0

簡単な方法は、カーソルが常に数字に触れているように十分な文字数が揃った後にマークを追加することです。テキスト フィールドはこれらの文字を追加するため、数字以外の文字を追加するたびにそのバグが発生します。たとえば、「-」で言及したバグは、数字が3つしかないときに1つの数字を削除しようとした場合にも発生します（スペースを削除してからスペースを追加します）. 例: 3 つの数字の場合(123、4 番目に入力した後に ) が追加されます。

もう 1 つの方法はinput = input.replace(/[^0-9]/g, '');、要素のデータ フィールドに を保存し、数値が変化しない場合は出力ステージ全体をスキップすることです。例えば：

input = input.replace(/[^0-9]/g, '');
if(element.phone == input){ return; }
element.phone = input;
于 2016-11-23T20:22:42.517 に答える