jQueryで追加したテキストボックスにフォーカスしたい

jqueryで、最後のテキストボックスに何か入力されたらもう一つテキストボックスを追加して、
そこにフォーカスするという動作の画面を作りたいと思っています。

テキストボックスの追加は出来たのですが、
その追加されたテキストボックスにフォーカスするという動きがうまく行きません。
(ブラウザのアドレスバーにフォーカスされてしまいます)

何か解決策がありましたら教えていただけないでしょうか。
よろしくお願いします。

lang
1<div>
2	<input type="textbox" name="value_1">
3	<input type="textbox" name="value_2">
4</div>

lang
1$(document).on('blur','input[name^=value]:last',function(){
2	if($(this).val() !== ''){
3		var last = $(this).attr('name').slice(6);
4		last++;
5		$(this).parent().append('<input type="textbox" name="value_' + last + '">' );
6		//↓これがうまくいかない
7		$('input[name=value_' + last + ']').focus();
8	}	
9});

行動規範の内容に同意します

回答1件

ベストアンサー

「フォーカスが外れた時」の他に追加で「タブキーが押された時」のイベント処理が必要なのかもしれません
jQuery はよくはわからないのですが、検索結果を参考にしつつ書いてみました(ほとんどコピペですね)

lang
1$(document).on('keydown','input[name^=value]:last', function(e){
2    var KEYCODE_TAB = 9;
3    var keyCode = e.keyCode || e.which;
4    var $obj = $(this);
5    var textboxBodySize = $obj.val().length;
6
7    if (keyCode == KEYCODE_TAB && textboxBodySize !== 0) {
8        var nextIndex = $obj.attr('name').slice(6) + 1;
9
10        var $newTextbox = $('<input>').attr({
11          'type': 'textbox',
12          'name': 'value_' + nextIndex
13        });
14
15        e.preventDefault();
16
17        $obj.parent().append($newTextbox);
18        $newTextbox.focus();
19    }
20});