jQueryを使ってプラグイン設定フォームで、半角英数字に変換して保存させる方法

フォーカスが外れた時に、全角で入力されている文字や数字を半角に変換するものです。

フォーカスが外れる＝プラグイン設定の更新ボタンをクリックした時にも動くと予想して「Hima Art Utility」プラグインの設定画面で実装してみたらうまくいきましたので、、メモとして残しておきます。

プラグイン設定画面で、入力された値を半角英数字に変換する方法

こんなカスタマイズしたいと考えているのは、プラグインを作るということができる方で、ある程度WordPressの仕組みについて理解されている方に限られると思うので、詳しい説明は端折って紹介します。

jsファイルの作成と子テーマへのアップロード

以下のコードを含むjsファイル（ここでは「sample.js」とします）を作成し、子テーマのルートディレクトリへアップロードします。

jQuery(document).ready(function($) {
    $(".transform").blur(function(){
        charChange($(this));
    });


    charChange = function(e){
        const val = e.val();
        const str = val.replace(/[Ａ-Ｚａ-ｚ０-９]/g,function(s){return String.fromCharCode(s.charCodeAt(0)-0xFEE0)});

        if(val.match(/[Ａ-Ｚａ-ｚ０-９]/g)){
            $(e).val(str);
        }
    }
});

jsファイルの読み込み

アップロードした「sample.js」を読み込みます。

/***** フォーム半角変換 *****/
function pwcn_transform_text_js_init(){
wp_register_script( 'text_transform_script', plugin_dir_url( __FILE__ ) . 'sample.js', array('jquery'), null,true );

wp_enqueue_script( 'text_transform_script');
}
add_action( 'admin_enqueue_scripts', 'pwcn_transform_text_js_init' );

jQueryなので、依存指定することと、管理画面側のみなので「admin_enqueue_scripts」にフックさせることがポイントです。

inputタグにclassを指定する

以下は一般的なinputタグです。そこに赤字で示すように「transform」というクラスを追加します（transformクラスはjQueryと呼応しているので、変更は両方で行うこと）。

<input name="name" class="transform" type="text" pattern="^[1-9][0-9]*$" id="id" maxlength="3" value="value">

これで、フォーカスが外れた時、保存した時（これもフォーカスが外れるのと同意）に、全角で入力されていたものが半角に変換されます。

ついでに数字のみ許可したいときは、パターン要素（青字の部分）を追加しておけば、半角文字に変換したものをチェックして、数字でなければ警告が出るようになります。

地味な機能追加ですが、これによって、プラグインの編集画面で保存したはずの値が反映されない（実際には全角入力だから反映されない）というトラブルをある程度回避できると思います。

以下のコード公開いただいているページに感謝！！

参考：[jQuery] JavaScriptで全角英数を半角英数に変換する方法