我有一个包含大量输入的表单。有时表单会有 1 个输入,有时最多有 10 个输入。当有人填写每个输入时,我希望底部的标签字段也被填充。现在我可以使用它,但只能使用一定数量的输入。 (目前 3 个)。
无论页面上有多少输入,我都想弄清楚如何让它工作。
HTML
Input1 <input id="input1" name="input1" type="text" value="" />
<br/>
Input2 <input id="input2" name="input2" type="text" value="" />
<br/>
Input3 <input id="input3" name="input3" type="text" value="" />
<br/>
<p>List of inputed text</p>
<span id="allInputs"></span>
查询
$("#input1,#input2,#input3").change(function () {
var inputArray = [$("#input1").val(), $("#input2").val(), $("#input3").val()];
$("#allInputs").text(inputArray.join(' '));
});
还有一个好处是将它们放入另一个输入而不是跨度,并在除最后一个之外的每个输入后添加一个逗号。
我知道我可能在这里遗漏了一些非常简单的东西。
最佳答案
在您的示例中,您只允许 3 个输入,因为您有 3 个输入框,当这些输入框中的任何一个更改时,您的标签将被传输到跨度。
现在听起来您希望允许多个条目,而不管输入有多少。您可以尝试一些简单的操作,例如下面的 fiddle 。
HTML:
<div>
<strong>Enter your tag and click add</strong>
<br/>
<input type="text" id="tagEntry" />
<button id="tagAdd">Add</button>
</div>
<div>
<strong>Entered Tags</strong>
<br/>
<input type="text" id="tagsEntered" />
</div>
Javascript:
var tags = [];
$(function() {
$('#tagAdd').click(function(){
//get the tag value and trim the spaces
var tVal = $('#tagEntry').val().trim();
if(tVal == '')
return;
//reset the entry box
$('#tagEntry').val('');
//verify tag not already saved
for(var i=0;i<tags.length;i++)
if(tags[i] == tVal)
return;
//add the tag to the array
tags.push(tVal);
//set the tags entry box
$('#tagsEntered').val(tags.join(', '));
});
});
更新:
JSFiddle 链接 http://jsfiddle.net/K2g4z/1/现在支持根据需要使用多个输入。为了实现这一点,我们绑定(bind)到一个类名而不是选择元素 ID。给定以下 Html。
<div>
<strong>Enter your tag and click add</strong>
<br/>
<strong>Tag 1</strong>
<input type="text" id="tagEntry" class="tagEntry" />
<br/>
<strong>Tag 2</strong>
<input type="text" class="tagEntry" />
<br/>
<strong>Tag 3</strong>
<input type="text" class="tagEntry" />
<br/>
<strong>Tag 4</strong>
<input type="text" class="tagEntry" />
<br/>
<strong>Tag 5</strong>
<input type="text" class="tagEntry" />
</div>
<div>
<strong>Entered Tags</strong>
<br/>
<input type="text" id="tagsEntered" />
</div>
所有的标签输入框都有一个类tagEntry
现在这个类将成为我们的选择器。使用以下 JS,我们可以将模糊事件绑定(bind)到具有类 tagEntry
的每个标签。这将在每次任何输入更改时更新标签框。
var tags = [];
$(function() {
$('.tagEntry').blur(function(){
//get the tag value and trim the spaces
var tVal = $(this).val().trim();
if(tVal == '')
return;
//reset the entry box
$(this).val('');
//verify tag not already saved
for(var i=0;i<tags.length;i++)
if(tags[i] == tVal)
return;
//add the tag to the array
tags.push(tVal);
//set the tags entry box
$('#tagsEntered').val(tags.join(', '));
});
});
如您所见,我们的处理程序绑定(bind)到所有输入,当任何输入接收到模糊事件时,将执行提取标签的方法。
关于javascript - 根据相同形式的其他输入填充标签输入,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/19940204/