電話番号のハイフンを取り除く

入力された電話番号のハイフンを取り除くサンプルをご紹介します。

サンプルについて

本サンプルのソースコードについてや、カスタマイズ方法等の技術的なお問合せは承っておりません。

動作イメージ

利用するイベント

• 申請入力画面 - パーツ値変更イベント

サンプルフォーム

サンプルで利用するフォームには、以下のパーツを配置しています。

パーツID	パーツタイプ	補足
fidPhoneNumber	テキスト（一行）パーツ	タイプ：ノーマル

カスタマイズコード

(function () {
    'use strict';

    // fidPhoneNumberパーツの値に変更があった場合、電話番号のハイフンを取り除くイベント
    collaboflow.events.on('request.input.fidPhoneNumber.change', function (data) {

        const parts = data.parts;

        // fidPhoneNumberパーツを取得
        const phoneNumber = parts.fidPhoneNumber;

        // 入力された電話番号からハイフンを取り除く
        const hyphenRemovedValue = phoneNumber.value.replace('-', '');

        // ハイフンが取り除かれた電話番号を、fidPhoneNumberパーツに入れる
        phoneNumber.value = hyphenRemovedValue;

    });

})();

動作の確認手順

1. サンプルのカスタマイズコードをjsファイルに保存します。
2. アプリ設定＞フォーム設定から新規に通常フォームを作成します。
3. サンプルフォームに、先で記載されている必要な項目を配置します。
4. サンプルフォームを再度表示し、カスタマイズタブを表示します。
5. 保存したファイルをアップロードします。
6. アプリ設定＞経路設定から新規に経路を作成します。
7. 新規文書から作成した経路名をクリックします。
8. 申請画面が表示されます。
9. 電話番号を入力します。
10. ハイフンが入っている場合は、取り除かれます。