フォーム入力完了時に、ひらがなとカタカナを相互変換、全角英数を半角英数に(ついでにハイフンも統一)自動で変換してくれるjQueryです。
ふりがなの変換や電話番号の入力ミスをバリデーションでエラーを出すより、勝手にやってくれた方がユーザービリティ的に優しいですよね。
jQuery関連記事
【jQuery】pdfが存在するか、mimeタイプのバリデーションする
Google reCAPTCHA v3をPHPのフォームで導入する
jQueryでinput[type="file"]で画像アップロード時にプレビューを表示する
jQueryでrequiredの専用エラー文と文字数制限のバリデーションをつくる
jQueryでラジオボタンとセレクトボックスが選択されているかのバリデーション
jQueryでチェックボックスの親子を連動させる + 選択されているかのバリデーション
フォーム入力時にひらがな・カタカナ・全角・半角をjQueryで自動変換する
placeholderを見やすく!jQuery+css3でつくるフローティングラベル
スマホ対応!ページ離脱はjQueryのアラートで防ぐ!
ひらがなチェック
JavaScript
function isHiragana(idname, category) { var kana = $("#" + idname).val(); if (!kana.match(/^[ぁ-んー]*$/)) { $('#errorbox').append(category + "にひらがな以外が入力されています。<br>"); error += "にひらがな以外が入力されています。<br>"; } }
カタカナチェック
JavaScript
function isKatakana(idname, category) { var kana = $("#" + idname).val(); if (!kana.match(/^[ァ-ンー]*$/)) { $('#errorbox').append(category + "にカタカナ以外が入力されています。<br>"); error += "にカタカナ以外が入力されています。<br>"; } }
全角英数を半角英数に変換(ついでにハイフンも統一)
JavaScript
$(".char_change").blur(function () { charactersChange($(this)); }); charactersChange = function (ele) { var val = ele.val(); var han = val.replace(/[A-Za-z0-9]/g, function (s) { return String.fromCharCode(s.charCodeAt(0) - 0xFEE0) }); if (val.match(/[A-Za-z0-9]/g)) { $(ele).val(han.replace(/[‐-―]/g, "-")); } }
.char_change
とすることで、このclassがついているフォームすべてで適用できるので便利。
ユニコード値で全角から半角に変換して、ついでにハイフンも統一します。
カタカナ→ひらがな変換
JavaScript
$(".kana_change").blur(function () { kanaChange($(this)); }); kanaChange = function (ele) { var val = ele.val(); var kana = val.replace(/[ァ-ン]/g, function (s) { return String.fromCharCode(s.charCodeAt(0) - 0x60) }); if (val.match(/[ァ-ン]/g)) { $(ele).val(kana) } };
.kana_change
とすることで、このclassがついているフォームすべてで適用できるので便利。
ユニコード値でカタカナから、ひらがなに変換する。
ひらがな→カタカナ変換
JavaScript
$(".hira_change").blur(function () { hiraChange($(this)); }); hiraChange = function (ele) { var val = ele.val(); var hira = val.replace(/[ぁ-ん]/g, function (s) { return String.fromCharCode(s.charCodeAt(0) + 0x60) }); if (val.match(/[ァ-ン]/g)) { $(ele).val(hira) } };
.hira_change
とすることで、このclassがついているフォームすべてで適用できるので便利。
ユニコード値で、ひらがなからカタカナに変換する。
漢字を入力すると自動でふりがな入力
名前の入力項目が、漢字表記とふりがな入力の2つある場合は、jquery.autoKana.jsを使うと、漢字を入力すると自動でふりがな入力されます。
詳細は下記からどうぞ!
コメント