基于相同形式的其他输入填充标记输入
Populating a tag input based on other inputs in same form
我有一个包含一堆输入的表单。有时表单将有 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>
Jquery
$("#input1,#input2,#input3").change(function () {
var inputArray = [$("#input1").val(), $("#input2").val(), $("#input3").val()];
$("#allInputs").text(inputArray.join(' '));
});
一个很好的选择是将它们放入另一个输入而不是跨度,并在每个输入后添加一个逗号,最后一个除外。
我知道我可能在这里错过了一些非常简单的东西。
在您的示例中,您只允许 3 个输入,因为您有 3 个输入框,当这些输入框中的任何一个发生变化时,您的标签就会被传输到范围。
现在听起来您希望允许多个条目,无论输入多少。您可以尝试一些简单的东西,例如下面的小提琴。
http://jsfiddle.net/K2g4z/
目录:
<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/现在支持根据需要使用多个输入。为了实现这一点,我们不是选择元素 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,我们可以将 blur 事件绑定到具有一类 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(', '));
});
});
如您所见,我们的处理程序绑定到所有输入,当任何输入收到模糊事件时,将执行提取标签的方法。
$("#input1,#input2,#input3").change(function () {
var inputArray = [$("#input1").val(), $("#input2").val(), $("#input3").val()];
$("#masterinput").val(inputArray.join(' '));
});
您可能
希望缩小选择器的范围,以便它不会选择页面上的所有文本输入。
var inputs$ = $("input:text").change(function () {
var inputArray = [];
$.each(inputs$, function(i, v) {
inputArray.push($(v).val());
}
$("#allInputs").text(inputArray.join(' '));
});
你来了:
var str = "";
$("input[type=text]").change(function () {
$("input[type=text]").each(function(){
str += $(this).val()+",";
};
});
$("#allInputs").html(str);
相关文章:
- 单击鼠标,用MySQL数据填充html表单输入字段
- Javascript文本框-查找最低的输入和填充
- 从确认框中预填充输入文本框
- 点击填充输入的按钮&提交
- CasperJS填充表单-输入名称有方括号
- 如何自动填充输入文本框值以与名称相同
- 在输入字段中选择一个值,然后用相应的数据填充另一个字段
- 在 angularjs 中动态填充的 orderby,不使用输入的第二个变量
- 用文本输入填充选择输入
- 使用用户输入填充组合框
- 基于相同形式的其他输入填充标记输入
- 当输入填充了必需的属性javascript/html/css时,如何更改焦点颜色
- JavaScript 在输入填充时显示隐藏元素
- 根据其他输入填充输入
- CSS-如何强制文本输入填充容器的剩余空间
- 用数据库的输入填充下拉框,从而导致另一个填充的页面
- Jquery选择器输入填充相同的id,但不同的数字
- HTML从输入填充选择菜单而不提交数据
- 输入填充与键盘模拟
- AngularJS根据上一个<选择>字段的输入填充<选择>字段