12

電話番号用のテキストボックスが 1 つあります。私の電話番号は、この形式の XXX-XXX-XXX のはずです。

XXX-XXX-XXX 形式の解決策を見つけましたが、そのコードを変更する方法がわかりません。

$('#ssn').keyup(function() {
    var val = this.value.replace(/\D/g, '');
    var newVal = '';
    while (val.length > 3) {
      newVal += val.substr(0, 3) + '-';
      val = val.substr(3);
    }
    newVal += val;
    this.value = newVal;
});

http://jsfiddle.net/ssthil/nY2QT/

4

6 に答える 6

29

jQuery を使用しているので、 jquery masked-input-pluginを試すことができます。

ここにjsFiddle があり、それがどのように機能するかを確認できます。

GitHub 上のプロジェクトのソース コードは、ここにあります。

実装は単純ではありません。

HTML:

<input id="ssn"/>

JavaScript:

$("#ssn").mask("999-999-999");

更新：

別の良いものはここにあります。

于 2012-06-07T11:34:30.667 に答える
7

私ができる限り、あなたが本当にする必要があるのはこれだけです：

$('#ssn').keyup(function()
{
    this.value = this.value.replace(/(\d{3})\-?/g,'$1-');
});

ただし、これは数字を入力した場合にのみ機能するため、追加のチェックを導入することをお勧めします。

$('#ssn').keyup(function(e) {
  if ((e.keyCode > 47 && e.keyCode < 58) || (e.keyCode < 106 && e.keyCode > 95)) {
    this.value = this.value.replace(/(\d{3})\-?/g, '$1-');
    return true;
  }
  
  //remove all chars, except dash and digits
  this.value = this.value.replace(/[^\-0-9]/g, '');
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<input type="text" id="ssn">

正規表現についてもう少し/(\d{3})\-?/g：
これは、3桁のグループをそれ自体に置き換え、その後にダッシュを付けます。角かっこは、一致した数字への後方参照を作成し、置換文字列で使用されます ( $1--> $1 は後方参照です)。
オプションのダッシュも置き換えられますが、後方参照には含まれないことに注意してください。入力が123で、置換パターンが のようなもの/(\d{3})/gになるか/(\d{3}\-?)/g、値が 、 などになり、123-4毎回ダッシュが 2 倍になる場合。123--45123---456

警告:
矢印キーなどが機能しないため、これはユーザーに多少の苦痛を与えます。幸いなことに、これは簡単に修正できます: 関数の先頭に次のコードを追加するだけです:

if (e.keyCode > 36 && e.keyCode < 41)
{
    return true;
}

そして、矢印はうまく機能します。他のキー (削除、バックスペース、シフトなど) については、このページを確認してください。

完全な例:ここにフィドルがあります

于 2012-06-07T12:26:13.447 に答える
-2

3 つの簡単な手順で、任意のフィールドに定型入力を設定できます。

1: まず、これらのライブラリを呼び出します http://code.jquery.com/jquery-1.7.2.min.js " " https://cdnjs.cloudflare.com/ajax/libs/jquery.maskedinput/1.4.1 /jquery.maskedinput.js "

2: 次のような単純なフォームを作成します。

<form> <input type="text" name="phone" id="phone" /> </form>

3: 次に、スクリプト コードをスクリプト タグに貼り付けます。

$(document).ready(function($) {

$('#phone').mask("99999-9999999-9",{placeholder:""});

});

于 2016-02-09T09:52:18.400 に答える