テキストボックスの生成と、生成されたテキストボックスへのフォーカス

いつもお世話になっております。

ｊquery初心者です。

Androidベースのバーコードリーダーで
JANコードを連続で20個読み取る事ができる画面を作成しています。
webブラウザはGoogle chrome 56.0 を使用しています

初期生成されるテキストボックスに13文字入力した後、
新たにテキストボックスを生成し、次のテキストボックスにフォーカスを合わせるソースコードを書きたいと思っています。

初期生成されるものを含め、合計20個のテキストボックスを生成したいと考えていますが、

20個でテキストボックスを生成を止めること、また生成したテキストボックスにフォーカスを移動することができず、困っております。

初心者でソースコードが見にくいと思いますがご助言お願い致します。

<!DOCTYPE html>

<head>
	<meta charset="UTF-8">
	<script src="jquery-3.3.1.min.js"></script>
</head>

<body>
	<form>
		<div id="jan_input"></div>
    	<input type="submit" value="送信">
	</form>
</body>

<script>
$(function(){
    
    var id_name = ["card_number1","card_number2","card_number3","card_number4","card_number5","card_number6","card_number7","card_number8","card_number9","card_number10","card_number10","card_number11","card_number12","card_number13","card_number14","card_number15","card_number16","card_number17","card_number18","card_number19","card_number20"];
    
    var piyo = document.getElementById("jan_input");
    
    jan_input = document.createElement("input");
	br = document.createElement("br");
	jan_input.setAttribute("type", "text");
	jan_input.setAttribute("id", id_name[1]);
	jan_input.setAttribute("maxlength", "13");
	jan_input.appendChild(br);
	piyo.appendChild(jan_input);
	piyo.appendChild(br);
	
	jan_input = document.createElement("input");
	br = document.createElement("br");
	jan_input.setAttribute("type", "text");
	jan_input.setAttribute("id", id_name[2]);
	jan_input.setAttribute("maxlength", "13");
	jan_input.appendChild(br);
	piyo.appendChild(jan_input);
	piyo.appendChild(br);
    
    
  var n=$('input[type=text][id^="card_number"]');		//最初のテキストボックスにフォーカスする
  
  var i=3;	// id_name[]の添字
  
  n.first().trigger('focus')
  
  .end().on('keyup',function() {
  	
      var idx=n.index(this);
      var next_idx=idx>=n.length-1?0:idx+1;
      
      if($(this).val().length>=$(this).attr('maxlength')){
        $(this).attr('readonly',true);	//13文字テキスト入力後、テキストボックスを読取り不可にする
        
        jan_input = document.createElement("input");
		br = document.createElement("br");
		jan_input.setAttribute("type", "text");
		jan_input.setAttribute("id", id_name[i]);
		jan_input.setAttribute("maxlength", "13");
		jan_input.appendChild(br);
		piyo.appendChild(jan_input);
		piyo.appendChild(br);
		
		i++;

        n.eq(next_idx).trigger('focus');		//次のテキストボックスへフォーカス
        
      };
    });
});
</script>

</html>

defghi1977

2018/04/02 08:43

その自動生成されたテキストボックスの内容を後から変更するケースを考慮されていますか？

退会済みユーザー

2018/04/02 09:06 編集

ご指摘ありがとうございます。テキストボックスの内容は13文字入力後、変更できないようにしたいと考えています。 disabledだと内容がsubmitされないとのことだったので13文字入力後、そのテキストボックスがreadonlyになるように変更しました。

defghi1977

2018/04/02 09:20

となるとユーザビリティー的に非常に使いにくいものになると思いますが

退会済みユーザー

2018/04/02 09:35 編集

今回この画面は13文字のバーコードを読取るための画面なので、読み取り後にテキストボックスを変更不可にしたいので大丈夫です。読取り間違いの処理等はDjangoサーバー側の処理で行います。

defghi1977

2018/04/02 09:38

ああ、jan-13コードをバーコードリーダで読み込んで, その内容をブラウザに入力するということですか. であれば、題名と質問内容及びタグをバーコードリーダーを使っている旨が明確となるように修正して下さい.

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

回答1件

ベストアンサー

例えばこのようにすればよいのでは？

HTML
1<label><input id="input" maxlength="13"></label>
2<div id="inputs"></div>

JavaScript
1"use strict";
2{
3	const childs = inputs.childNodes;
4	input.oninput = e => {
5		if(input.value.length >= 13){
6			inputs.insertAdjacentHTML("beforeend", `<input name="code" readonly value="${input.value}"/>`);
7			input.value = "";
8		}
9		if(childs.length >= 20){
10			input.disabled = true;
11		}
12	}
13}

入力対象のinput要素を変更しようとするのではなく, 入力内容をもとに入力済みのinput要素を追加していくようにすれば動作がシンプルになります.
※なお、このコードがバーコードリーダ環境下で正しく動作するかは判りませんので、よく動作検証をして下さい.

前提がバーコードリーダーによるコード取り込みとのことでしたので、回答を取り下げます.

現在のソースではあらかじめテキストボックス用意してカーソルをフォーカスしておりますが、

テキストボックスに13文字文字を入力すると、別のテキストボックスが改行されて自動生成され、そのテキストボックスにフォーカスする仕様にしたいと考えています。

テキストボックスの内容は13文字入力後、変更できないようにしたいと考えています。

仕組み上不可能ではありませんが, そのような後から修正出来ないフォームを私は使いたくありません.

むしろ、入力を単一の(いつでも修正可能な)textarea要素で受け, 内容が変更される都度入力された内容を13文字毎に区切ったプレビューを表示し, フォーム送信時にその分割済みの文字列群でポストデータを生成するようにしたら如何でしょうか？

投稿2018/04/02 09:31

編集2018/04/03 05:52

defghi1977

総合スコア4756

退会済みユーザー

2018/04/03 07:02 編集

毎度お世話になっております。バーコードリーダ環境について説明がなく。申し訳ありませんでした。バーコードリーダーはAndroid6.0ベースで、今回作る画面はChromeのブラウザ上で動かすつもりです。教えていただいたコードはWinbdows10上のChromeでは動作するのですが、Androidベースのバーコードリーダー上ではテキストボックスに入力ができませんでした。この問題の解決と、ページを開いた際にテキストボックスにフォーカスしたいのですが、可能でしょうか?

defghi1977

2018/04/03 07:08

フォーカス自体はautofocus属性なりfocusメソッドなりで目的のテキストボックスに移動させることは簡単です. 一方「Android上でのバーコードリーダーでテキストボックスへの入力が出来ない」については、ここで質問されるより、バーコードリーダーのメーカーに直接問い合わせたほうがより早く回答が得られると思います.（パブリックな質問サイトの限界）

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