jquery カナの自動入力と文字数チェック

カナの自動入力

jqueryのライブラリがある
harisenbon / autokana

▼こんな感じ

let selector_kanji = '[name="name_kanji"]'; // 漢字を入力するほうのセレクター
let selector_kana = '[name="name_kana"]'; // カナを入力するほうのセレクター
$.fn.autoKana(selector_kanji, selector_kana, { katakana : true });

javascriptでバリデーション

送信ボタンを押してサーバー側でバリデーション…ではなく、送信ボタンを押す前にjavascript(jquery)でバリデーションする場合
※やりたいことによってかなり面倒な処理

• 登録時
• 編集時、開いたタイミングでもバリデーションを走らせる
• 漢字とカナのそれぞれが対象
• カナは漢字を入力したとき自動入力されるので、こっちも考慮する

※各ルールを厳しい設定にするなら省略しても良い処理も含む

必要なイベント

• 漢字の入力欄: 入力したとき、フォーカスしたとき、フォーカス解除したとき
• カナの入力欄: 入力したとき、フォーカスしたとき、フォーカス解除したとき、自動入力されたとき

入力したとき、フォーカスしたとき、フォーカス解除したとき

「input, focus, blur」に対して設定

カナの入力欄に）自動入力されたとき

ライブラリのautokanaをカスタマイズすれば対応できそうな気がする
面倒なので…「漢字の入力欄に入力したとき、フォーカス解除したとき」に処理を追加するのが簡単そう

ざっくりしたイメージ

// 初期チェック
漢字のバリデーション;
カナのバリデーション;

// 対象
let selector_kanji = '[name="name_kanji"]'; // 漢字を入力するほうのセレクター
let selector_kana = '[name="name_kana"]'; // カナを入力するほうのセレクター

// カナの自動入力の設定
$.fn.autoKana(selector_kanji, selector_kana, { katakana : true });

// 各イベント設定
$(selector_kanji).on('focus', function(){
	漢字のバリデーション;
});
$(selector_kanji).on(['input','blur'], function(){
	漢字のバリデーション;
	カナのバリデーション;
});
$(selector_kana).on(['focus','input','blur'], function(){
	カナのバリデーション;
});