仅当文本框有文本时,才在表单输出中添加字符分隔结果
Add a character to separate results in a form output only when the text box has text
我制作了一个表单,在用户填写文本框后呈现文本。我想在单词之间添加下划线,但只有当文本框充满文本时才可以。
Box1: 一个
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>
我知道_
是加下划线,但我不知道怎么给值加上下划线,所以它只在相应的文本框中有文本时才显示在结果框中。
在此先感谢您的帮助!
将以下事件属性添加到 <form>
:
onkeyup
onkeydown
onchange
将以下表达式分配给前面列出的每个属性:
totalamount.value = totalamount.value.replace(/_{2,}/, '_')
所以现在每次击键都会被覆盖 2 到 3 次以及失去焦点的任何时候。在“keyup”、“keydown”和“change”事件中,将在 totalamount
的值中搜索由两个或多个连续出现的下划线组成的模式——任何匹配项都将被替换为单个下划线.
此外,[for]
属性已更正为四个 <input>
中的 #id
:"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>
基于以下 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>
我制作了一个表单,在用户填写文本框后呈现文本。我想在单词之间添加下划线,但只有当文本框充满文本时才可以。
Box1: 一个
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>
我知道_
是加下划线,但我不知道怎么给值加上下划线,所以它只在相应的文本框中有文本时才显示在结果框中。
在此先感谢您的帮助!
将以下事件属性添加到 <form>
:
onkeyup
onkeydown
onchange
将以下表达式分配给前面列出的每个属性:
totalamount.value = totalamount.value.replace(/_{2,}/, '_')
所以现在每次击键都会被覆盖 2 到 3 次以及失去焦点的任何时候。在“keyup”、“keydown”和“change”事件中,将在 totalamount
的值中搜索由两个或多个连续出现的下划线组成的模式——任何匹配项都将被替换为单个下划线.
此外,[for]
属性已更正为四个 <input>
中的 #id
:"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>
基于以下 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>