Question

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

以下是代码：

＆＃13;

<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>

＆＃13;

我正在使用autofocus="autofocus"，但它仅适用于第一个动态文本框，而其他功能则不起作用。知道我怎么能实现这个目标？

Answer 1

有关自动对焦无效的详细原因，请参阅https://stackoverflow.com/a/47207659/5674976;它只适用于页面加载。

使用elementName.focus（）

＆＃13;

<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>

＆＃13;

Answer 2

来自https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input

autofocus HTML5此布尔属性允许您指定表单当页面加载时，控件应该具有输入焦点，除非用户覆盖它（例如通过键入不同的控件）。 只有一个文档中的表单元素可以具有autofocus属性，即是一个布尔值。

所以你可以使用自动对焦来专注于某些事情（适合服务器端渲染）如果你想在页面加密后改变它，你需要使用javascript。

修改请参阅@George Campbell回答如何实现这一目标：https://stackoverflow.com/a/47207691/6126033

Answer 3

尝试仅使用"<input type='text' name='" + arrName + "[]' autofocus";

还有......

$(document).on(<event>, <object>, function(event) {console.log("test"});

Answer 4

（旧帖子，已经接受了答案，但无论如何...）

尝试一下。

var focusDynForms = function() {
    var captureAutoFocus = function (form) {

        var el_keys = Object.keys(form.elements);
        for(var i = 0; i < el_keys.length; i++) {
            var el = form.elements[el_keys[i]];
            if (["text","password"].indexOf(el.type)>=0){
                 if (el.autofocus){
                    el.focus();
                    return;
                 }
             }
        }
    };

    var forms = document.querySelectorAll("form");

    // dynamically created forms need a helping hand to find focus in life...
    forms.forEach(captureAutoFocus);
}

很明显，这仅会增加文本和密码输入，但是您可以自定义其他类型。

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

4 个答案: