У меня есть форма, и, когда пользователь вводит текстовое поле, выход видится далее вниз. В настоящий момент im использует 'id', поэтому выход ограничивается одним полем.имя класса вместо id для живого выхода?
Что бы я хотел сделать, это вывод, видимый в нескольких текстовых полях во время ввода пользователем. Я получил это далеко, просто редактируя код, который я нашел в Интернете, но я не знаю, как исходить отсюда, пробовав несколько часов. Любая помощь приветствуется. Я поместил ссылку jsbin ниже, а также код ниже, который на всякий случай не работает.
Заранее спасибо
http://jsbin.com/tugulu/edit?html,js,output
HTML
<html>
<head>
<meta charset="utf-8">
<title>Company</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<form action="begin-create-done.html" method="get">
<fieldset>
<p><label class="field"> Company Name </label>:
<span><input type="text" name="Company"></span> <br>
<p><label class="field"> Full Company Name </label>:
<span><input type="text" name="CompanyFull"></span> <br>
<p><label class="field"> Registration Number </label>:
<span><input type="text" name="CompanyNumber"></span> <br>
<p><label class="field"> Full Company Address </label>:
<span><input type="text" name="CompanyAddress"></span> <br>
</fieldset>
</form>
Company = <span id="Company"></span><br>
Company Full Name = <span id="CompanyFull"></span><br>
Company Registration Number = <span id="CompanyNumber"></span><br>
Company Address = <span id="CompanyAddress"></span>
<script src="input.js"></script>
</body>
</html>
стиль
fieldset {
width: 600px;
}
label.field {
text-align: right;
width:200px;
float: left;
font-weight: bold;
color: black;
}
input.textbox-300 {
width: 300px;
float: left;
}
fieldset p {
clear: both;
padding: 5px;
}
Javascript
// create the object that will hold the input values
var formValues = {};
function inputObj(formNR, defaultValues) {
var inputs = formNR.getElementsByTagName('input');
for (var i = 0; i < inputs.length; i++) {
formValues[inputs[i].name] = defaultValues[i];
if(inputs[i].type === 'text') {
inputs[i].value = defaultValues[i];
document.getElementById(inputs[i].name).innerHTML = defaultValues[i];
}
inputs[i].addEventListener('keyup', function() {
formValues[this.name] = this.value;
document.getElementById(this.name).innerHTML = this.value;
}, false);
}
}
// build a little array with the defaultValues for each input
var defValues =[];
// this will push all inputs from the given form in the formValues object.
inputObj(document.forms[0], defValues);