0

クライアントは、電話番号データを含むテキストフィールドを 2 つに分割するよう求めています。1 つは国コード用、もう 1 つは残りの番号用です。

残念ながら、このフィールドはシステムにかなりハードコードされており、これまでに収集されたすべてのデータは 1 つの統合フィールドとして (したがって、データベース内の 1 つの列として保存されます)。

したがって、最善の答えは次のようにすることだと思います。

  1. Javascript を使用して、1 つのテキスト フィールドを 2 つのテキスト フィールドに置き換えます。
  2. ユーザーが送信ボタンをクリックすると、これらは元のテキスト フィールドにマージされます。
  3. そのフィールドがデータベースから読み取られるとき (つまり、管理者がエントリを表示するとき) に、そのフィールドを再び 2 つに分離する方法があれば、ボーナス マークが付けられます。データ形式は一貫している必要があることに注意してください。たとえば、既存の文字列データを一連の JSON 文字列と混在させたくありません。

これが最善の方法ですか？このアプローチで予見可能な問題 (ユーザーが JavaScript を有効にしていない以外) はありますか? このようなことを行うように設計された jQuery プラグインはありますか?

また、ある時点で有効な電話番号として検証する必要がありますが、それは自分で把握できます。

4

2 に答える 2

2

テキスト フィールドを 2 つに分割する代わりに、マスクされた入力 JQuery プラグインを使用できます。

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

$(document).ready(function(){
   $("#phone").mask("(999)999999");                
});

サンプル JS : http://jsfiddle.net/vGeMV/3/

編集: ポイント 3 について: 数値を 2 つに分割して表示する場合は、国コードが存在するかどうかにかかわらず、左からではなく右 (通常は 7 桁) から分割することができます。正しい分割。

于 2012-11-21T16:23:52.410 に答える
1

プラグインを使用したくない場合は、jsFiddleで作成したこのスニペットをいつでもチェックできます

JS で動作することを確認したい場合は、display:'none' を display:'block' に変更してください。

ここに私のJavaScriptがあります

$(function() {
    $('#phone').css({ display:'none' });
    $('#phone').after(') <input type="text" name="phoneMainNumber" id="phoneMainNumber" />').after('(<input type="text" value="555" name="phoneAreaCode" id="phoneAreaCode" style="width:30px;" />');
    bindChange();
});

function bindChange() {
    $('#phone').val('('+$('#phoneAreaCode').val()+') ');
    $('#phoneMainNumber, #phoneAreaCode').keyup(function() {
       $('#phone').val('('+$('#phoneAreaCode').val()+') '+$('#phoneMainNumber').val());    
    });   
}
于 2012-11-21T16:32:39.250 に答える