【jQuery】テキストボックスを入力文字数によって半角スペースを入れる方法

今回はテキストボックスの入力文字数によって文字と文字の間に半角スペースを入れる方法を紹介していきたいと思います。

テキストボックスでよく使うメソッド

jQueryには標準でさまざまなメソッドが用意されています。

inputタグでよく使用されるフォーカスされたときは外れたときのメソッドから入力したときに発火するメソッドなどいろいろあります。

focusin

こちらはテキストボックスなどにフォーカスされたときに使うメソッドになります。

〇〇〇〇に入るのは対象となるテキストボックスのタグやクラス名を入れましょう。

jQuery(document).on('focusin', '〇〇〇〇', function() {
       ～フォーカスされたときの処理～
});

focusout

次はフォーカスが外れたときに使うのがfocusoutです。

jQuery(document).on('focusout', '〇〇〇〇', function() {
       ～フォーカスがはずれたときの処理～
});

keydown

キーが押されたときに使うのがkeydownです。

テキストボックスだと入力されたときに発火するメソッドになります。

jQuery(document).on('keydown', '.textbox', function() {
       ～入力されたときの処理～
});

入力文字数によって半角スペースを入れる方法

html

<input type="text" class="textbox" placeholder="123456789012"> 

jQuery

フォーカスされたときの処理

var targetInput = jQuery('.textbox');

/* フォーカスされたとき */
jQuery(document).on('focusin', '.textbox', function() {
        targetInput.attr('placeholder', '');
});

フォーカスがはずれたとき

/* フォーカスがはずれたとき */     
jQuery(document).on('focusout', '.textbox', function() {
	targetInput.attr('placeholder', '123456789012');
       
	var val = targetInput.val();
	var numCount = val.length;
       
	var lastChar = val.substr(val.length - 1);
	if(lastChar == ' '){
		var val2 = val.slice(0,-1);
		targetInput.val(val2);
	}
});

キーが押されたとき

/* キーが押されたとき */
jQuery(document).on('keydown', '.textbox', function() {
    var val = targetInput.val();       
        var numCount = val.length;     
        let numWhile = " ";
       
        if(event.keyCode != 8){        
                if((numCount == 4) && (event.keyCode != 8)){
                        var val_new = addStr(val, 4, numWhile);
                        targetInput.val(val_new);
                }
               
                if((numCount == 9) && (event.keyCode != 8)){
                        var val_new = addStr(val, 9, numWhile);
                        targetInput.val(val_new);
                }
               
                if(numCount > 13){
                        return false;
                }
               
        }
});    

サンプル