仅当文本框中有文本时，才在表单输出中添加字符以分隔结果

Question

我制作了一个表单，在用户填充文本框后呈现文本。我想在单词之间添加下划线，但前提是文本框中已填充文本。

方框1：一个

方框2:(空(

方框3：三个

当前结果：One__Three(注意双下划线(

所需结果：One_Three

<form onsubmit="return false" oninput="totalamount.value = client.value + '_' + campaign.value + '_' + spotname.value + '_' + market.value">

<ul >
<li id="li_1" >
<div>Client:<input name="client" id="client" type="text" maxlength="100" value="" /></div></li>
<li id="li_2" >
<div>Campaign:<input name="campaign" id="campaign" type="text" value="" /></div></li>
<li id="li_3" >
<div>Spot Name:<input name="spotname" id="spotname" type="text" value="" /></div></li>
<li id="li_4" >
<div>Market:<input list="market" name="market" />
<datalist id="market">
<option value="HM" >
<option value="OLV" >
<option value="SM_Vertical" >
<option value="SM_Square" >
<option value="GM" >
<option value="InternalUse" >
<option value="Country?" >
</datalist>
</div></li>
<li id="li_5" align="center" style="font-weight:bolder; background-color: #F5F5F5; padding:10px">
<output name="totalamount" id="totalamount" for="filename"></output>
</li>

我知道_正在添加下划线，但我不知道如何将其添加到值中，因此只有当相应的文本框中有文本时，它才会显示在结果框中。

提前感谢您的帮助

Answer 1

将以下事件属性添加到<form>:

onkeyup
onkeydown
onchange

将以下表达式应用于前面列出的每个属性：

totalamount.value = totalamount.value.replace(/_{2,}/, '_')

因此，现在每一次击键都将被覆盖2到3次，以及任何失去焦点的时间。在"；keyup"keydown"；，以及"；改变"；事件中，将在totalamount的值中搜索由两个或多个连续出现的下划线组成的模式——任何匹配都将被一个下划线取代。

此外，[for]属性已被校正为四个<input>s:"client campaign spotname market"中的#ids。在这种情况下是否有区别IDK，但我无论如何都没有看到任何"filename"。

:root {
font: 1ch/1.5 'Segoe UI';
}
body {
font-size: 3ch;
}
label,
output,
input {
display: inline-block;
font: inherit
}
label {
width: 10ch
}

<form onsubmit="return false" oninput="totalamount.value = client.value + '_' + campaign.value + '_' + spotname.value + '_' + market.value" onkeyup="totalamount.value = totalamount.value.replace(/_{2,}/, '_')" onkeydown="totalamount.value = totalamount.value.replace(/_{2,}/, '_')"
onchange="totalamount.value = totalamount.value.replace(/_{2,}/, '_')">
<label for='client'>
Client: </label>
<input name="client" id="client" type="text" maxlength="100" value="">
<br>
<label for='campaign'>
Campaign: </label>
<input name="campaign" id="campaign" type="text" value="">
<br>
<label for='spotname'>
Spot Name: </label>
<input name="spotname" id="spotname" type="text" value="">
<br>
<label for='market'>
Market: </label>
<input list="market" name="market">
<datalist id="market">
<option value="HM">
<option value="OLV">
<option value="SM_Vertical">
<option value="SM_Square">
<option value="GM">
<option value="InternalUse">
<option value="Country?" >
</datalist>
<br>
<label for='totalamount'>Total Amount: </label>
<output name="totalamount" id="totalamount" for="client campaign spotname market"></output>
</form>

基于以下OP评论的不同版本。

:root {
font: 1ch/1.5 'Segoe UI';
}
body {
font-size: 3ch;
}
label,
output,
input {
display: inline-block;
font: inherit
}
label {
width: 10ch
}

<form onsubmit="return false" oninput="final.value = client.value + campaign.value + tag.value + market.value + version.value" onchange="final.value = client.value + campaign.value + tag.value + market.value + version.value">
<label for='client'>
Client: </label>
<input name="client" id="client" onchange="this.value = this.value.length < 1 || this.value === '_' ? '' : '_'+this.value" type="text" maxlength="100" value="">
<br>
<label for='campaign'>
Campaign: </label>
<input name="campaign" id="campaign" onchange="this.value = this.value.length < 1 || this.value === '_' ? '' : '_'+this.value" type="text" value="">
<br>
<label for='tag'>
Tag: </label>
<input name="tag" id="tag" onchange="this.value = this.value.length < 1 || this.value === '_' ? '' : '_'+this.value" type="text" value="">
<br>
<label for='market'>
Market: </label>
<input list="market" name="market" onchange="this.value = this.value.length < 1 || this.value === '_' ? '' : '_'+this.value">
<datalist id="market">
<option value="HM">
<option value="OLV">
<option value="SM_Vertical">
<option value="SM_Square">
<option value="GM">
<option value="InternalUse">
<option value="Country?" >
</datalist>
<br>
<label for='version'>
Version: </label>
<input name="version" id="version" onchange="this.value = this.value.length < 1 || this.value === '_v' ? '' : '_v'+this.value" type="text" value="">
<br>
<label for='final'>Final: </label>
<output name="final" id="final" for="client campaign tag market version"></output>
</form>