I'm working on a project which imitates a console window. When the user presses enter, a new <input> text field is added to the screen and focused upon. The only problem is that the values of the previous <input> fields are lost in the process.
Here is my code:
<!DOCTYPE html>
<html>
<head>
<link rel='stylesheet' href='style.css'/>
<script src='script.js'></script>
</head>
<body>
<input type="text" class="console_window"/>
</body>
</html>
var input;
function init() {
function keyup(e) {
switch(e.which) {
case 13:
document.body.innerHTML +=
"<input type='text' class='console_window'/>"
input = document.getElementsByClassName("console_window")[document.getElementsByClassName("console_window").length-1];
input.focus();
break;
}
}
document.addEventListener("keyup", keyup, false);
}
document.addEventListener("DOMContentLoaded", init, false);
And the Fiddle.
Also, I prefer not to use plugins.
Thanks!
I'm working on a project which imitates a console window. When the user presses enter, a new <input> text field is added to the screen and focused upon. The only problem is that the values of the previous <input> fields are lost in the process.
Here is my code:
<!DOCTYPE html>
<html>
<head>
<link rel='stylesheet' href='style.css'/>
<script src='script.js'></script>
</head>
<body>
<input type="text" class="console_window"/>
</body>
</html>
var input;
function init() {
function keyup(e) {
switch(e.which) {
case 13:
document.body.innerHTML +=
"<input type='text' class='console_window'/>"
input = document.getElementsByClassName("console_window")[document.getElementsByClassName("console_window").length-1];
input.focus();
break;
}
}
document.addEventListener("keyup", keyup, false);
}
document.addEventListener("DOMContentLoaded", init, false);
And the Fiddle.
Also, I prefer not to use plugins.
Thanks!
Share Improve this question asked Oct 7, 2014 at 19:32 gilbert-vgilbert-v 1,3051 gold badge11 silver badges24 bronze badges3 Answers
Reset to default 7It's because your are reseting the page's html markup...
Instead of addind pure HTML text, you should consider using DOM elements manipulation:
Updated Fiddle
var inp = document.createElement("input");
inp.className = "console_window";
inp.type = "text";
document.body.appendChild(inp);
inp.focus();
When you do document.body.innerHTML += "<input type='text' class='console_window'/>", you are destroying all the input elements and recreating them. When you do this, the values do not copy over. You want to use something like appendChild to add the new input element to the DOM.
http://jsfiddle/894yo3ja/
var input;
function keyup(e) {
switch (e.which) {
case 13:
var i = document.getElementsByClassName("console_window").length + 1;
document.getElementById(i - 1).setAttribute("value", document.getElementById(i - 1).value);
document.body.innerHTML += "<input type='text' class='console_window' id='" + i + "'/>";
document.getElementById(i).focus();
break;
}
}
document.addEventListener("keyup", keyup, false);
Hope that helps, the value doesn't get stored, so you have to set the value attribute.
The issue you have is that when you re write the inner html out, the value that you have entered into the input is wiped out. To actually set the value to the input before overwriting the inner html on the body you would need to call .setAttribute("value",value); on the input.