如何不显示输入没有输入值后使用JS或JQuery连接?

Question

我在这里使用一个简单的脚本来连接几个<input/>标记。

它的工作原理是每个输入标签都有一个隐藏的成对值。例如，用户为标记为Year的输入输入数据，后面有一个逗号的成对值。

这一切都很好。但是，如果用户必须经常使用它，那么如果所有输入都被连接起来，包括用户留下的空白，它就会付出代价。

我想问一下，是否有人知道如何不连接那些留下空白的输入，包括它的成对值。

请查看我的脚本:

$('#month, #day,#year, #pl1, #pl2, #div, #title, #subtitle, #chapter, #section, #stat1, #stat2').bind('keypress blur', function() {
$('#input12').val('Act ' + $('#month').val() + ' ' +
$('#day').val() + ', ' +
$('#year').val() + ', ' + 'P.L. ' +
$('#pl1').val() + '-' +
$('#pl2').val() + ', ' + 'Div ' +
$('#div').val() + ', ' + 'Title ' +
$('#title').val() + ', ' + 'Subtitle ' +
$('#subtitle').val() + ', ' + 'Ch ' +
$('#chapter').val() + ', ' + '§ ' +
$('#section').val() + ', ' +
$('#stat1').val() + ' Stat. ' +
$('#stat2').val() + ', provides:' );
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>

<fieldset class="section-border" id="standard3sections" autocomplete="off">
<legend class="section-border">Act Intro</legend>
<form autocomplete="off">
<input class="form-control form-control-sm mt-1 noenter" type="text" id="month" placeholder="Month"/>
<input class="form-control form-control-sm mt-1 noenter" type="text" id="day" placeholder="Day"/>
<input class="form-control form-control-sm mt-1 noenter" type="text" id="year" placeholder="Year"/>
<input class="form-control form-control-sm mt-1 noenter" type="text" id="pl1" placeholder="116"/>
<input class="form-control form-control-sm mt-1 noenter" type="text" id="pl2" placeholder="XXX"/>
<input class="form-control form-control-sm mt-1 noenter" type="text" id="div" placeholder="Div"/>
<input class="form-control form-control-sm mt-1 noenter" type="text" id="title" placeholder="Title"/>
<input class="form-control form-control-sm mt-1 noenter" type="text" id="subtitle" placeholder="Subtitle"/>
<input class="form-control form-control-sm mt-1 noenter" type="text" id="chapter" placeholder="Chapter"/>
<input class="form-control form-control-sm mt-1 noenter" type="text" id="section" placeholder="Section"/>
<input class="form-control form-control-sm mt-1 noenter" type="text" id="stat1" placeholder="134"/>
<input class="form-control form-control-sm mt-1 noenter" type="text" id="stat2" placeholder="Page"/>
</form>
<form class="mt-3" autocomplete="off">
<input class="form-control form-control-sm inputcopybtn noenter" type="text" id="input12" placeholder="Result"/>
</form>
</fieldset>

我提供的样本仍然是错误的，因为配对值与前面的输入在一起。等我明白了如何实现我的目标，我再来处理这个问题。

应该是这样的:

Act + inputval(month) + ' ' +
inputval(day) + ', ' + 
inputval(year) + ', ' + 
P.L. + inputval(pl1) + '-' +
inputval(pl2) + ', ' +
Div + inputval(div) + ' ' +

所以我将它更新成上面的样子。

我已经把它放在一边好几个月了，因为我真的不知道怎么修理它了。但是现在我真的需要这个功能得到改进。我会很感激所有的帮助。谢谢你！

Answer 1

我认为更好的方法是将每个输入与每个输入相关联的前缀放在HTML中。例如，#pl1可以有一个数据属性，而不是随后将P.L.连接到字符串中:

<input class="form-control form-control-sm mt-1 noenter" type="text" id="pl1" data-prefix="P.L. " placeholder="116" />

然后，在处理程序内部，遍历所有输入(无需对每个输入进行硬编码)，过滤掉空的输入，并将prefix数据集值(如果存在)添加到每个输入值:

const inputs = $('form input:not(#input12)');
inputs.on('keypress, blur', () => {
const str = [...inputs]
.filter(input => input.value)
.map((input) => {
const { prefix, noComma } = input.dataset;
return (prefix || '') + input.value + (noComma === '' ? ' ' : ', ')
})
.join('')
// remove trailing commas
.replace(/, $/, '');
$('#input12').val('Act ' + str + ' provides:');
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<fieldset class="section-border" id="standard3sections" autocomplete="off">
<legend class="section-border">Act Intro</legend>
<form autocomplete="off">
<input class="form-control form-control-sm mt-1 noenter" type="text" id="month" data-no-comma placeholder="Month" />
<input class="form-control form-control-sm mt-1 noenter" type="text" id="day" placeholder="Day" />
<input class="form-control form-control-sm mt-1 noenter" type="text" id="year" placeholder="Year" />
<input class="form-control form-control-sm mt-1 noenter" type="text" id="pl1" data-prefix="P.L. " placeholder="116" />
<input class="form-control form-control-sm mt-1 noenter" type="text" id="pl2" data-prefix="- " placeholder="XXX" />
<input class="form-control form-control-sm mt-1 noenter" type="text" id="div" data-prefix="Div " placeholder="Div" />
<input class="form-control form-control-sm mt-1 noenter" type="text" id="title" placeholder="Title" />
<input class="form-control form-control-sm mt-1 noenter" type="text" id="subtitle" placeholder="Subtitle" />
<input class="form-control form-control-sm mt-1 noenter" type="text" id="chapter" placeholder="Chapter" />
<input class="form-control form-control-sm mt-1 noenter" type="text" id="section" placeholder="Section" />
<input class="form-control form-control-sm mt-1 noenter" type="text" id="stat1" placeholder="134" />
<input class="form-control form-control-sm mt-1 noenter" type="text" id="stat2" placeholder="Page" />
</form>
<form class="mt-3" autocomplete="off">
<input class="form-control form-control-sm inputcopybtn noenter" type="text" id="input12" placeholder="Result" />
</form>
</fieldset>