autoKanaをベースにして、半角カタカナへ変換

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>

参考

发表评论

邮箱地址不会被公开。 必填项已用*标注