班级名称而不是id为活输出？ [英] class name instead of id for live output?
本文介绍了班级名称而不是id为活输出？的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我有一个表单，并且随着用户在文本字段中的输入，输出可以进一步向下看到。此刻即时使用'id'，所以输出仅限于一个字段。
我想要做的是在用户输入时在多个文本字段中显示输出。通过编辑我在网上找到的一些代码，我已经掌握了这一点，但是在尝试了几个小时之后，我不知道如何从这里开始。任何帮助将非常感激。我已经把jsbin链接放在下面，并且下面的代码也是在它不起作用的情况下。
提前致谢
http://jsbin.com/tugulu/edit?html,js，输出
html
< html>
< head>
< meta charset =utf-8>
< title>公司< / title>
< link rel =stylesheettype =text / csshref =style.css>
< / head>
< body>
< form action =begin-create-done.htmlmethod =get>
< fieldset>
< p>< label class =field>公司名称< / label>：
< span>< input type =textname =Company>< / span> <峰; br>
< p>< label class =field> Full Company Name< / label>：
< span>< input type =textname =CompanyFull>< / span> <峰; br>
< p>< label class =field>注册编号< / label> ;:
< span>< input type =textname =CompanyNumber>< / span> <峰; br>
< p>< label class =field>完整公司地址< / label>：
< span>< input type =textname =CompanyAddress>< / span> <峰; br>
< / fieldset>
< / form>
Company =< span id =Company>< / span>< br>
公司全名=< span id =CompanyFull>< / span>< br>
公司注册号码=< span id =CompanyNumber>< / span>< br>
公司地址=< span id =CompanyAddress>< / span>
< script src =input.js>< / script>
< / body>
< / html>
style
fieldset {
width：600px;
}
label.field {
text-align：right;
width：200px;
float：left;
font-weight：bold;
颜色：黑色;
}
input.textbox-300 {
width：300px;
float：left;
}
fieldset p {
clear：both;
padding：5px;
javascript
//创建将保存输入值的对象
var formValues = {};
函数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）;
//用每个输入的defaultValues构建一个小数组$ $ $ $ var defValues = [];
//这将推送formValues对象中给定表单的所有输入。
inputObj（document.forms [0]，defValues）;
解决方案
有朋友帮我解决了这个问题，代码如下：
< html>
< head>
< meta charset =utf-8>
< title>公司详情< / title>
< / head>
< style> fieldset {
width：600px;
}
label.field {
text-align：right;
width：200px;
float：left;
font-weight：bold;
颜色：黑色;
}
input.textbox-300 {
width：300px;
float：left;
}
fieldset p {
clear：both;
padding：5px;
}
< / style>
< body>
< form action =begin-create-done.htmlmethod =get>
< fieldset>
< p>< label class =field>名称< / label>：
< span>< input type =textname =Name1>< / span> <峰; br>
< / fieldset>
< / form>
姓名1 =< span class =Name1>< / span>< br>
名称2 =< span class =Name1>< / span>< br>
< script>
var formValues = {};
函数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];
outputs = document.getElementsByClassName（inputs [i] .name）;
for（var j = 0; j< outputs.length; j ++）{
outputs [j] .innerHTML = defaultValues [i];
$ b $ input [i] .addEventListener（'keyup'，function（）{
formValues [this.name] = this.value;
outputs = document.getElementsByClassName（this.name）;
for（var j = 0; j< outputs.length; j ++）{
outputs [j] .innerHTML = this.value;
}
}，false）;
//用每个输入的defaultValues构建一个小数组$ $ $ $ var defValues = [];
//这将推送formValues对象中给定表单的所有输入。
inputObj（document.forms [0]，defValues）;
< / script>
< / body>
< / html>
I have a form, and as the user inputs in the text field the output is visible further down. At the moment im using 'id' so the output is limited to one field only.
What I would like to do is have the output visible in more than one text field while the user is typing. I've got this far just by editing some code I found online, but i dont know how to proceed from here after having tried for a few hours. Any help would be much appreciated. I've put the jsbin link below and also the code below that just in case it doesnt work.
Thanks in advance
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>
style
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);
解决方案
A friend helped me fix this up, code below:
<html>
<head>
<meta charset="utf-8">
<title>Company Details</title>
</head>
<style>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;
}
</style>
<body>
<form action="begin-create-done.html" method="get">
<fieldset>
<p><label class="field"> Name </label>:
<span><input type="text" name="Name1"></span> <br>
</fieldset>
</form>
Name 1 = <span class="Name1"></span><br>
Name 2 = <span class="Name1"></span><br>
<script>
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];
outputs = document.getElementsByClassName(inputs[i].name);
for ( var j = 0; j < outputs.length; j++) {
outputs[j].innerHTML = defaultValues[i];
}
}
inputs[i].addEventListener('keyup', function() {
formValues[this.name] = this.value;
outputs = document.getElementsByClassName(this.name);
for ( var j = 0; j < outputs.length; j++) {
outputs[j].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);
</script>
</body>
</html>
这篇关于班级名称而不是id为活输出？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
