自动聚焦动态添加的文本框 - html/javascript

Ado*_*orn 2 html javascript forms

我将文本框动态添加到表单中。

以下是代码:

<html lang="en-US">
    
    <head>
    <meta name="referrer" content="origin">
    <script>
    	var counter = 0;
        var limit = 50;
    
        function addInput(divName, arrName){
             if (counter == limit)  {
                  alert("You have reached the limit of adding " + counter + " inputs");
             }
             else {
                  var newdiv = document.createElement('div');
    	      var af = "autofocus"
                  newdiv.innerHTML = "<input type='text' name='" + arrName + "[]' required autofocus=" + af + ">";
                  document.getElementById(divName).appendChild(newdiv);
                  counter++;
             }
        }
    	
    </script>
    </head>
    
    <body>
    <form action="part.php" align="center" method="POST">
    					<div id = "dynamicInputHolder_1">
    					 <b>Emotion </b><input type="text" value="" name="emotion" id="emotion" class="generatedEmotion" readonly>
    					 <input type="hidden" value="" name="uniqueID" id="uniqueID">
    					 <div id="dynamicInput_1">
    							<textarea rows="5" cols="50" readonly class="floating-box">
    John arrived at Sally's house to pick her up. John and Sally were going to a fancy restaurant that evening for a dinner. John was little nervous because he was going to ask Sally to marry him.</textarea>
    					 </div>
    					 <input type="button" value="Add connecting sentences" onClick="addInput('dynamicInput_1', 'myInputs_1');">
    					 </div>
    
    				 <br>
    			</form>
    
    </body>
    </html>
Run Code Online (Sandbox Code Playgroud)

我正在输入autofocus="autofocus",但它仅适用于第一个动态文本框,对于其他动态文本框不起作用。知道我怎样才能实现这个目标吗?

Geo*_*rge 5

有关自动对焦不起作用的详细原因,请参阅/sf/answers/3304536161/ ;它仅适用于页面加载。

使用 elementName.focus()

<html lang="en-US">
    
    <head>
    <meta name="referrer" content="origin">
    <script>
    	var counter = 0;
        var limit = 50;
    
        function addInput(divName, arrName){
             if (counter == limit)  {
                  alert("You have reached the limit of adding " + counter + " inputs");
             }
             else {
                  var newdiv = document.createElement('div');
    	      var af = "autofocus"
                  newdiv.innerHTML = "<input id='my-div-"+counter+"' type='text' name='" + arrName + "[]' required autofocus=" + af + ">";
                  document.getElementById(divName).appendChild(newdiv);
                  document.getElementById('my-div-'+counter).focus();
                  counter++;
             }
        }
    	
    </script>
    </head>
    
    <body>
    <form action="part.php" align="center" method="POST">
    					<div id = "dynamicInputHolder_1">
    					 <b>Emotion </b><input type="text" value="" name="emotion" id="emotion" class="generatedEmotion" readonly>
    					 <input type="hidden" value="" name="uniqueID" id="uniqueID">
    					 <div id="dynamicInput_1">
    							<textarea rows="5" cols="50" readonly class="floating-box">
    John arrived at Sally's house to pick her up. John and Sally were going to a fancy restaurant that evening for a dinner. John was little nervous because he was going to ask Sally to marry him.</textarea>
    					 </div>
    					 <input type="button" value="Add connecting sentences" onClick="addInput('dynamicInput_1', 'myInputs_1');">
    					 </div>
    
    				 <br>
    			</form>
    
    </body>
    </html>
Run Code Online (Sandbox Code Playgroud)