AMP-Bind输入[value]:非空绑定输入框没有css作为手动输入

时间:2018-06-16 15:39:37

标签: amp-html amp-bind

我的表格大约有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>

谢谢!

0 个答案:

没有答案