javascriptでカナ打ち 自動

こんにちは、管理人の@Salesforce.Zです。

入力フォームで

特に顧客情報

姓名を入力する際に、

カナを自動にしてほしいでしょう

今回、そのライブラリーを共有します。

目次

名前のカナ自動入力

今回、共有するライブラリーは保証がありませんので、

ローカルにダウンロードにして使ってください

ライブラリー

// --------------------------------------------------------------------
// Description : フォームのフリガナ入力支援
// --------------------------------------------------------------------


var kntxtext = {
    config : {
        labelStr : {
            hira : 'ふりがなを自動挿入する', // チェックボックスに表示する文字列（ひらがな）
            kana : 'フリガナを自動挿入する' // チェックボックスに表示する文字列（カタカナ）
        },
        btnStr : {
            hira : '名前からふりがなを挿入する', // ボタンに表示する文字列（ひらがな）
            kana : '名前からフリガナを挿入する' // ボタンに表示する文字列（カタカナ）
        },
        // ライブラリによって生成される要素に付加するクラス名
        cls : {
            checkbox : '',
            button : '',
            label : '',
            div : ''
        },
        // ライブラリによって生成される要素に付加するスタイル
        styles : {
            checkbox : 'border:none; background:transparent; cursor:pointer; margin-left:5px;',
            button : 'margin:0 0 0 5px;',
            label : 'cursor:pointer;',
            div : 'margin:0; padding:0; background:transparent; display:inline;'
        }
    },
    // 定数
    constant : {
        // 自動で入力されるふりがなの文字種（0:ひらがな,1:カタカナ）
        letterType : { hira:0, kana:1 },
        // ふりがな入力の種類（0:自動入力,1:チェックボックス,2:チェックボックス[デフォルトチェック],3:ボタン）
        insertType : { auto:0, check:1, checked:2, button:3 }
    },
    // ターゲット情報格納用連想配列
    target : [],
    sys : {
        config : {
            idBaseStr : 'kntxtext_',
            kanaExtractionPattern : new RegExp('[^ 　ぁあ-んー]', 'g'),
            kanaCompactingPattern : new RegExp('[ぁぃぅぇぉっゃゅょ]', 'g')
        },
        flags : {
            convert : false,
            active : true
        },
        elements : {
            name : null,
            kana : null
        },
        storage : {
            timer : null,
            baseKana : '',
            ignoreString : '',
            values : [],
            input : ''
        }
    },
    initialize : function() {
        for ( var i=0, len=kntxtext.target.length; i < len; i++ ) {
            var nameStr = kntxtext.target[i][0];
            var kanaStr = kntxtext.target[i][1];
            var name = document.getElementsByName(nameStr);
            var kana = document.getElementsByName(kanaStr);
            name[0].correspondingInput = kntxtext.target[i][1];
            name[0].letterType = kntxtext.target[i][2];
            name[0].insertType = kntxtext.target[i][3];
            switch ( kntxtext.target[i][3] ) {
                case kntxtext.constant.insertType.check:
                    kntxtext.createCheckBox(name[0], false);
                    break;
                case kntxtext.constant.insertType.checked:
                    kntxtext.createCheckBox(name[0], true);
                    break;
                case kntxtext.constant.insertType.button:
                    kntxtext.createButton(name[0]);
                    break;
                default:
                    break;
            }
            kntxtext.addEvent( name[0], 'focus', kntxtext.focus );
            kntxtext.addEvent( name[0], 'keydown', kntxtext.keydown );
            kntxtext.addEvent( name[0], 'blur', kntxtext.blur );
        }
    },
    // --------------------
    // events
    // --------------------
    focus : function() {
        kntxtext.sys.elements.name = this;
        kntxtext.sys.elements.kana = (document.getElementsByName(this.correspondingInput)) ? document.getElementsByName(this.correspondingInput)[0] : null;
        kntxtext.observe.prepare();
        kntxtext.observe.start();
    },
    keydown : function() {
        if ( kntxtext.sys.flags.convert ) {
            kntxtext.observe.prepare();
        }
    },
    blur : function() {
        kntxtext.observe.stop();
    },
    // --------------------
    // functions
    // --------------------
    observe : {
        start : function() {
            kntxtext.sys.storage.timer = window.setInterval( kntxtext.check.value, 30 );
        },
        stop : function() {
            window.clearInterval(kntxtext.sys.storage.timer);
        },
        prepare : function() {
            var itype = kntxtext.sys.elements.name.insertType;
            if ( itype != kntxtext.constant.insertType.button ) {
                kntxtext.sys.storage.baseKana = kntxtext.sys.elements.kana.value;
            }
            kntxtext.sys.flags.convert = false;
            kntxtext.sys.storage.ignoreString = kntxtext.sys.elements.name.value;
            switch ( itype ) {
                case kntxtext.constant.insertType.check:
                case kntxtext.constant.insertType.checked:
                    var checkbox = document.getElementById(new String(kntxtext.sys.config.idBaseStr + kntxtext.sys.elements.name.name));
                    if ( checkbox && checkbox.checked ) {
                        kntxtext.sys.flags.active = true;
                    } else {
                        kntxtext.sys.flags.active = false;
                    }
                    break;
                case kntxtext.constant.insertType.button:
                    kntxtext.sys.flags.active = false;
                    break;
                default:
                    kntxtext.sys.flags.active = true;
                    break;
            }
        },
        set : function() {
            kntxtext.sys.storage.baseKana = new String(kntxtext.sys.storage.baseKana + kntxtext.sys.storage.values.join(''));
            kntxtext.sys.flags.convert = true;
            kntxtext.sys.storage.values = new Array();
        },
        clear : function() {
            kntxtext.sys.storage.baseKana = '';
            kntxtext.sys.flags.convert = false;
            kntxtext.sys.storage.ignoreString = '';
            kntxtext.sys.storage.input = '';
            kntxtext.sys.storage.values = [];
        }
    },
    check : {
        value : function() {
            var input = kntxtext.sys.elements.name.value;
            switch ( input ) {
                case '':
                    kntxtext.observe.clear();
                    kntxtext.setKanaStr();
                    break;
                default:
                    input = kntxtext.clean(input);
                    switch ( input ) {
                        case kntxtext.sys.storage.input:
                            return;
                            break;
                        default:
                            kntxtext.sys.storage.input = input;
                            if ( !kntxtext.sys.flags.convert ) {
                                var values = input.replace(kntxtext.sys.config.kanaExtractionPattern,'').split('');
                                kntxtext.check.convert(values);
                                kntxtext.setKanaStr(values);
                            }
                            break;
                    }
                    break;
            }
        },
        convert : function( values ) {
            if ( !kntxtext.sys.flags.convert ) {
                var x = kntxtext.sys.storage.values.length - values.length;
                var i = Math.abs(x);
                switch ( true ) {
                    case i > 1:
                        var tmpValues = values.join('').replace(kntxtext.sys.config.kanaCompactingPattern,'').split('');
                        var y = kntxtext.sys.storage.values.length - tmpValues.length;
                        var z = Math.abs(y);
                        if ( z > 1 ) {
                            kntxtext.observe.set();
                        }
                        break;
                    default:
                        if ( kntxtext.sys.storage.values.length == kntxtext.sys.storage.input.length
                             && kntxtext.sys.storage.values.join('') != kntxtext.sys.storage.input ) {
                            kntxtext.observe.set();
                        }
                        break;
                }
            }
        }
    },
    setKanaStr : function( values ) {
        if ( !kntxtext.sys.flags.convert ) {
            if ( values ) {
                kntxtext.sys.storage.values = values;
            }
            var val = kntxtext.convert2kana( new String(kntxtext.sys.storage.baseKana + kntxtext.sys.storage.values.join('')) );
            if ( kntxtext.sys.elements.kana.value != val ) {
                kntxtext.sys.elements.kana.value = val;
            }
        }
    },
    convert2kana : function( value ) {
        var gtype = kntxtext.sys.elements.name.letterType;
        switch ( gtype ) {
            case kntxtext.constant.letterType.kana:
                var str = new String('');
                for( var i=0, len=value.length; i<len; i++ ) {
                    var c = value.charCodeAt(i);
                    switch ( kntxtext.isHiragana(c) ) {
                        case true:
                            str += String.fromCharCode(c+96);
                            break;
                        default:
                            str += value.charAt(i);
                            break;
                    }
                }
                return str;
                break;
            default:
                return value;
                break;
        }
    },
    isHiragana : function( char ) {
        return ((char >= 12353 && char <= 12435) || char == 12445 || char == 12446);
    },
    clean : function( value ) {
        if ( value.indexOf(kntxtext.sys.storage.ignoreString) > -1 ) {
            return value.replace(kntxtext.sys.storage.ignoreString,'');
        } else {
            var ignoreArray = kntxtext.sys.storage.ignoreString.split('');
            var inputArray = value.split('');
            for( var i=0, len=ignoreArray.length; i<len; i++ ) {
                switch (ignoreArray[i]) {
                    case inputArray[i]:
                        inputArray[i] = '';
                        break;
                }
            }
            return inputArray.join('');
        }
    },
    createCheckBox: function( element, flag ) {
        var parent = element.parentNode;
        var div = kntxtext.createBlock();
        var checkbox = kntxtext.createInputCheckbox(element, flag);
        var label = kntxtext.createLabel(element);
        parent.replaceChild(div, element);
        div.appendChild(element);
        div.appendChild(checkbox);
        checkbox.checked = flag;
        div.appendChild(label);
    },
    createBlock : function() {
        var div = document.createElement('div');
        if ( kntxtext.config.cls.div ) {
            div.className = kntxtext.config.cls.div;
        }
        if ( kntxtext.config.styles.div ) {
            div.style.cssText = kntxtext.config.styles.div;
        }
        return div;
    },
    createInputCheckbox: function( element, flag ) {
        var input = document.createElement('input');
        input.type = 'checkbox';
        input.id = new String(kntxtext.sys.config.idBaseStr + element.name);
        if ( kntxtext.config.cls.checkbox ) {
            input.className = kntxtext.config.cls.checkbox;
        }
        if ( kntxtext.config.styles.checkbox ) {
            input.style.cssText = kntxtext.config.styles.checkbox;
        }
        return input;
    },
    createLabel: function( element ) {
        var label = document.createElement('label');
        label.htmlFor = new String(kntxtext.sys.config.idBaseStr + element.name);
        if ( kntxtext.config.cls.label ) {
            label.className = kntxtext.config.cls.label;
        }
        if ( kntxtext.config.styles.label ) {
            label.style.cssText = kntxtext.config.styles.label;
        }
        if ( !element.letterType ) {
            label.innerHTML = kntxtext.config.labelStr.hira;
        } else {
            label.innerHTML = kntxtext.config.labelStr.kana;
        }
        return label;
    },
    createButton: function( element ) {
        var parent = element.parentNode;
        var div = kntxtext.createBlock();
        var button = kntxtext.createInputButton(element);
        parent.replaceChild(div, element);
        div.appendChild(element);
        div.appendChild(button);
    },
    createInputButton: function( element ) {
        var input = document.createElement('input');
        input.type = 'button';
        input.id = new String(kntxtext.sys.config.idBaseStr + element.name);
        if ( kntxtext.config.cls.button ) {
            input.className = kntxtext.config.cls.button;
        }
        if ( kntxtext.config.styles.button ) {
            input.style.cssText = kntxtext.config.styles.button;
        }
        if ( !element.letterType ) {
            input.value = kntxtext.config.btnStr.hira;
        } else {
            input.value = kntxtext.config.btnStr.kana;
        }
        input.onclick = function() {
            if ( kntxtext.sys.elements.name ) {
                if ( this.id == (kntxtext.sys.config.idBaseStr + kntxtext.sys.elements.name.name) ) {
                    kntxtext.sys.elements.kana.value = kntxtext.convert2kana( new String(kntxtext.sys.storage.baseKana + kntxtext.sys.storage.values.join('')) );
                }
            }
        };
        return input;
    },
    addEvent : function( target, event, func ) {
        try {
            target.addEventListener(event, func, false);
        } catch (e) {
            target.attachEvent(new String('on' + event), (function(el){return function(){func.call(el);};})(target));
        }
    }
}
kntxtext.addEvent( window, 'load', kntxtext.initialize );

使用例

VFのJS部

// カナ自動入力
kntxtext.target.push(
                [ 適用するinput要素のname属性,対応するカナのinput要素のname属性,文字種（ひらがなorカタカナ）,入力形式 ])
kntxtext.target.push(
[
'lastNameKanji', //VFなら、IDの入れ方は{!conponent.pageid:lastNameKanji}とかになるので、ちゃんとsfdc的に指定してください。
'lastNameKana',
kntxtext.constant.letterType.kana,
kntxtext.constant.insertType.auto
])

VFフォーム部例

<apex:inputText id="lastNameKanji"
              　value="{!newKokyaku.LastName}"
              　label="姓"
              　styleClass="inputFieldWidth" />

やることは姓を入力すると、姓のカナかなが自動入力されるです。

最後に

// カナ自動入力
kntxtext.target.push([
　　　　　　　　　第1引数：適用するinput要素のname属性,
　　　　　　　　　第2引数：対応するカナのinput要素のname属性,
　　　　　　　　　第3引数：文字種（ひらがなorカタカナ）,
　　　　　　　　　第4引数：入力形式 
　　　　　　　　　])

まとめると

// カナ自動入力
kntxtext.target.push([
　　　　　　　　　第1引数：（例：姓）自動的にカナが入力されたい元の対象の属性(id or name),
　　　　　　　　　第2引数：（例：姓のカナ）自動的にカナが入力したい対象の属性(id or name),
　　　　　　　　　第3引数：文字種（ひらがなorカタカナ）,
　　　　　　　　　第4引数：入力形式 
　　　　　　　　　])