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

Question

我制作了一个表单，在用户填写文本框后呈现文本。我想在单词之间添加下划线，但仅限于文本框填充文本时。

盒子1：一个

Box2：（空）

Box3：三个

当前结果：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”和“change”事件中，将在totalamount 的值中搜索由两个或多个连续出现的下划线组成的模式——任何匹配都将被单个下划线替换。

此外，[for] 属性已更正为四个<input>s 中的#ids："client campaign spotname market"。在这种情况下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>

基于以下 OPs cmets 的不同版本。

: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>