【Booking Package】電話番号が半角数字のみ入力できるようにしたい

当サイトは広告を含んでいます。

2025-03-14

電話番号の入力を指定できないかな…

予約管理プラグイン【Booking Package】

WordPressの予約管理プラグイン「Booking package」月額料金不要で、予約管理ができるので予約システムに料金をかけたくない方にオススメです！

SMSサービス「Twilio」と連携することで、予約確認通知をSMS（ショートメッセージ）で送ることも可能になります。

しかしSMSで通知を送るためには、入力欄に半角数字で電話番号を入力していただく必要があります。

今回は、Booking packageの電話番号入力で、半角数字のみの入力に制限する方法をご紹介します！

電話番号を半角数字のみするJavascript

WordPressの予約管理プラグイン「Booking Package」にて、電話番号入力を半角数字のみしたい場合は以下のJSを追加してみて下さい！

window.addEventListener('bookingPackageUserFunction', function() {
    function updatePhoneInput() {
        let phoneInput = document.querySelector('#booking_package_input_phone');

        if (phoneInput) {
            phoneInput.setAttribute("type", "tel");
            phoneInput.setAttribute("inputmode", "tel");
            phoneInput.setAttribute("pattern", "[0-9]*");
            phoneInput.setAttribute("autocomplete", "tel");

            phoneInput.addEventListener("input", function () {
                this.value = this.value.replace(/[^0-9]/g, "");
            });
        }
    }

    updatePhoneInput();

    let observer = new MutationObserver(updatePhoneInput);
    observer.observe(document.body, { childList: true, subtree: true });
});

これで、半角数字の入力しか受け付けられなくなります。

スマホ入力の際は、数字キーボードが自動的に開かれる仕組みになっています。