1

我有一个包含大约 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>

谢谢！

4

0 回答 0