i am adding the text boxes dynamically to the form.
following is the code:
<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>i am adding the text boxes dynamically to the form.
following is the code:
<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>I am putting in autofocus="autofocus", but it works only for the first dynamic text box, for other it does not work. Any idea how can i achieve this?
- element.focus() – George Commented Nov 9, 2017 at 17:00
4 Answers
Reset to default 5See https://stackoverflow./a/47207659/5674976 for a detailed reason for autofocus not working; it only works on page load.
Use 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>from https://developer.mozilla/en-US/docs/Web/HTML/Element/input
autofocus HTML5 This Boolean attribute lets you specify that a form control should have input focus when the page loads, unless the user overrides it (e.g. by typing in a different control). Only one form element in a document can have the autofocus attribute, which is a Boolean.
so you can use autofocus to focus on something (good for server side rendering) and you need to use javascript if you want to change this after the page is laoded.
Edit: see @George Campbell answer to how to achieve this: https://stackoverflow./a/47207691/6126033
Try to use just "<input type='text' name='" + arrName + "[]' autofocus";
And also ...
$(document).on(<event>, <object>, function(event) {console.log("test"});
(old post, already accepted answer, but anyways....)
try this.
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);
}
Obviously this only addreses text and password inputs, but you can customize for other types.