我的表格大约有20个值,一半用于结算信息,另一半用于目的地信息。
当客户逐步完成结算信息时,目的地信息将根据他们输入的结算信息完成。然后他们可以在到达该部分时更改目的地信息。
完成结算信息后,结算输入会从带有白色背景的灰色占位符更改为带黄色背景的黑色输入值。
但是,使用AMP-bind完成的目标信息不会出现这种样式。
代替添加更多命令,您是否可以使用黑色文本和黄色背景快速设置已完成的送货信息的样式?
请参阅此处了解演示https://codepen.io/iamalta/pen/MXEMvO
<form method=post target="_top" action-xhr="https://example.com/thankyou.amp.html" custom-validation-reporting="show-all-on-submit" >
<h3>Billing Information</h3>
<div>
<label for="firstname" aria-hidden="true">First name</label>
<input
type="text"
value=""
name="firstname"
id="firstname"
placeholder="Billing First Name"
autocomplete="given-name"
required
on="input-debounced:AMP.setState({dfn: event.value})"
/>
</div>
<div>
<label for="lastname" aria-hidden="true">Last name</label>
<input
type="text"
value=""
name="lastname"
id="lastname"
placeholder="Billing Last name"
autocomplete="family-name"
required on="input-debounced:AMP.setState({dln: event.value})"
/>
</div>
<h3>Destination Information</h3>
<div>
<label for="destfirstname" aria-hidden="true">First name<span class=red>*</span></label>
<input
type="text"
value=""
name="destfirstname"
id="destfirstname"
placeholder="Destination First name"
autocomplete="given-name"
required
[value]="thisdfn != null ? thisdfn : dfn != null ? dfn : ''"
on="input-debounced:AMP.setState({thisdfn: event.value})"
/>
</div>
<div>
<label for="destlastname" aria-hidden="true">Last name</label>
<input
type="text"
value=""
name="destlastname"
id="destlastname"
placeholder="Destination Last name"
autocomplete="family-name"
required
[value]="thisdln != null ? thisdln : dln!=null ? dln : ''"
on="input-debounced:AMP.setState({thisdln: event.value})"
/>
</div>
<input type="submit" value="Submit" class="ampstart-btn">
</form>
谢谢!