autoKanaをベースにして、半角カタカナへ変換
カタカナの自動入力
jQuery.autoKana.jsを使用します。
使用例
<div class="form-row">
<div class="col-md-4">
<label for="name">First Name</label>
<input type="text" class="form-control" id="name" placeholder="名前" value="" required>
<div class="valid-feedback">
Looks Good!
</div>
</div>
<div class="col-md-4">
<label for="kana">Last Name</label>
<input type="text" class="form-control" id="kana" placeholder="カタカナ" value="" required>
<div class="valid-feedback">
Looks Good!
</div>
</div>
</div>
<script src="common/js/jQuery-3.5.1.js"></script>
<script src="common/js/jquery.autoKana.js"></script>
<script>
$(document).ready(
function () {
$.fn.autoKana("#name","#kana",{katakana:true});
}
)
</script>
カスタマイズ 半角カタカナ入力
運用上で、全角カタカナではなく、半角カタカナに変換したい。
1.カタカナマッピングを作成します。
ふりがなからカタカナに変換する場合、文字コード演算でできますが、半角カタカナはできませんので、カタカナマッピングを作成します。
// 変換したい文字をkey:valueの形で追加することが可能
var kanaMap = {
"ガ": "ガ", "ギ": "ギ", "グ": "グ", "ゲ": "ゲ", "ゴ": "ゴ",
"ザ": "ザ", "ジ": "ジ", "ズ": "ズ", "ゼ": "ゼ", "ゾ": "ゾ",
"ダ": "ダ", "ヂ": "ヂ", "ヅ": "ヅ", "デ": "デ", "ド": "ド",
"バ": "バ", "ビ": "ビ", "ブ": "ブ", "ベ": "ベ", "ボ": "ボ",
"パ": "パ", "ピ": "ピ", "プ": "プ", "ペ": "ペ", "ポ": "ポ",
"ヴ": "ヴ", "ヷ": "ヷ", "ヺ": "ヺ",
"ア": "ア", "イ": "イ", "ウ": "ウ", "エ": "エ", "オ": "オ",
"カ": "カ", "キ": "キ", "ク": "ク", "ケ": "ケ", "コ": "コ",
"サ": "サ", "シ": "シ", "ス": "ス", "セ": "セ", "ソ": "ソ",
"タ": "タ", "チ": "チ", "ツ": "ツ", "テ": "テ", "ト": "ト",
"ナ": "ナ", "ニ": "ニ", "ヌ": "ヌ", "ネ": "ネ", "ノ": "ノ",
"ハ": "ハ", "ヒ": "ヒ", "フ": "フ", "ヘ": "ヘ", "ホ": "ホ",
"マ": "マ", "ミ": "ミ", "ム": "ム", "メ": "メ", "モ": "モ",
"ヤ": "ヤ", "ユ": "ユ", "ヨ": "ヨ",
"ラ": "ラ", "リ": "リ", "ル": "ル", "レ": "レ", "ロ": "ロ",
"ワ": "ワ", "ヲ": "ヲ", "ン": "ン",
"ァ": "ァ", "ィ": "ィ", "ゥ": "ゥ", "ェ": "ェ", "ォ": "ォ",
"ッ": "ッ", "ャ": "ャ", "ュ": "ュ", "ョ": "ョ",
"。": "。", "、": "、", "ー": "ー", "「": "「", "」": "」", "・": "・",
" ":" "
}
2.半角カタカナかどうかを判断する
数値文字参照で判断する。
// chara 32 はスペース
function _isHanHiRaGaNa(chara) {
return ((chara >= 65377 && chara <= 65439) || (chara == 32));
};
3.半角カタカナ変換を外部で指定できるようにする
/*
var options = $.extend(
{
'katakana': false,
}, passedOptions);
*/
// 以下のうに変更
var options = $.extend(
{
'katakana': false,
'hanKaKu':false
}, passedOptions);
4.半角カタカナに変換する
function _toHanKaTaKaNa(src){
if (options.hanKaKu) {
var c, i, str;
str = new String;
for (i = 0; i < src.length; i++) {
c = src.charCodeAt(i);
if (!_isHanHiRaGaNa(c)) {
str += src[i].replace(src[i],function (match) {
return kanaMap[match];
})
} else {
str += src.charAt(i);
}
}
return str;
} else {
return src;
}
}
5.カタカナ変換の直後に半角カタカナに変更する
/*
function _setKana(new_values) {
if (!flagConvert) {
if (new_values) {
values = new_values;
}
if (active) {
var _val = _toKatakana(baseKana + values.join(''));
elKana.val(_val);
}
}
}
*/
// 以下のうに変更
function _setKana(new_values) {
if (!flagConvert) {
if (new_values) {
values = new_values;
}
if (active) {
var _val = _toKatakana(baseKana + values.join(''));
var return_val;
if (options.hanKaKu) {
return_val = _toHanKaTaKaNa(_val);
} else {
return_val = _val;
}
elKana.val(return_val);
}
}
};
6.使用する
<script>
$(document).ready(
function () {
$.fn.autoKana(
"#name",
"#kana",
{
katakana:true,
hanKaKu: true
});
}
)
</script>