【发布时间】：2018-07-07 18:19:08
【问题描述】：
我正在尝试在 html-amp 中实现步进滑动表单。我有一个页面，我想在其中实现按钮，当在输入名字中给出一些输入时应该启用该按钮。我的按钮仍然被禁用，我尝试了不同的方法来实现，但都没有成功。 我想实现类似 disable[disabled] = "!firstname" 的东西，如果满足条件的 firstname 为 null，则按钮保持禁用状态。
另外，我发现这段代码在 microsoft edge 以及 stackexchange 本身提供的编辑器中都能完美运行。因此，它变得越来越棘手，因为它不仅仅是一些需要修复的逻辑错误。
<!---{
"preview": "default",
"default": "preview"
}--->
<!--
## Introduction
This sample demonstrates different approaches for how to implement a multi-step flow in AMP. These could
be used for checkout flows, sign-ups or surveys.
-->
<!-- -->
<!doctype html>
<html ⚡>
<head>
<meta charset="utf-8">
<link rel="canonical" href="<%host%>/../dynamic_amp/multi_page_flow">
<meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">
<script async src="https://cdn.ampproject.org/v0.js"></script>
<!-- ## Setup -->
<!-- We use `amp-bind` to coordinate the page transitions... -->
<script async custom-element="amp-bind" src="https://cdn.ampproject.org/v0/amp-bind-0.1.js"></script>
<!-- ... and `amp-selector` for implementing a simple survey. -->
<script async custom-element="amp-selector" src="https://cdn.ampproject.org/v0/amp-selector-0.1.js"></script>
<style amp-boilerplate>body{-webkit-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-moz-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-ms-animation:-amp-start 8s steps(1,end) 0s 1 normal both;animation:-amp-start 8s steps(1,end) 0s 1 normal both}@-webkit-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-moz-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-ms-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-o-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}</style><noscript><style amp-boilerplate>body{-webkit-animation:none;-moz-animation:none;-ms-animation:none;animation:none}</style></noscript>
<style amp-custom>
/* Sliding Stepper */
.stepper.sliding {position: relative;overflow-x: hidden;height: 300px;max-width: 420px;margin: 1rem auto;}
.stepper.sliding .page {background-color: "#ffffff";position: absolute;display: flex;flex-direction: column;justify-content: center;align-items: flex-start;width: 100%;height: 100%;padding: 16px;transition: transform 0.25s cubic-bezier(0, 0, 0.3, 1);}
.stepper.sliding .page.active {transform: translateX(0%);pointer-events: auto;}
.stepper.sliding .page:not(.active) {opacity: 0.5;pointer-events: none;}
.stepper.sliding .page.next {transform: translateX(100%);}
.stepper.sliding .page.previous {transform: translateX(-100%);}
.stepper.sliding .back {position: relative;height: 32px;width: 100%;max-width: 300px;cursor: pointer;line-height: 32px;border: none;background: none;text-align: left;padding: 0;-webkit-appearance: none;}
.stepper.sliding .back:after {content: "";position: absolute;top: 10px;right: 3px;border: solid black;border-width: 0 3px 3px 0;display: inline-block;padding: 3px;transform: rotate(45deg);-webkit-transform: rotate(45deg);}
/* Survey styling */
amp-selector.poll [option][selected] {outline: none;}
amp-selector.poll [option] {display: flex;align-items: center;}
amp-selector.poll [option]:before {transition: background 0.25s ease-in-out;content: "";display: inline-block;width: 16px;height: 16px;margin: 8px;border-radius: 100%;border: solid 1px #b60845;font-size: 14px;line-height: 16px;}
amp-selector.poll [option][selected]:before {text-align: center;content: "✓";color: white;background: #b60845;}
amp-selector.poll [option][selected]:focus {outline: -webkit-focus-ring-color auto 5px;}
.top_slogan{ text-align:center; color:#555; font-size:30px; padding: 15px 10px; line-height:40px; clear:both;}
#abe-preview {display: flex;flex-direction: column;align-items: center;justify-content: center;width: 100%;min-height: calc(100vh - var(--header-height));}
.main_content_small{max-width: 500px;margin: 0 auto;padding: 2em;background-color: #e8e8e8;border: 20px solid #fff;}
.row {zoom: 1;}
.row:before,
.row:after {content: "";display: table;}
.row:after {clear: both;}
.hcolor{ color: #f98740;}
.input-group {margin-bottom: 1em;zoom: 1;}
.input-group:before,
.input-group:after {content: "";display: table;}
.input-group:after {clear: both;}
.input-group-icon {position: relative;}
.input-group-icon input {padding-left: 4.4em;}
.input-group-icon .input-icon {position: absolute;top: 0;left: 0;width: 3.4em;height: 3.4em;line-height: 3.4em;text-align: center;pointer-events: none;}
.input-group-icon .input-icon:after {position: absolute;top: 0.6em;bottom: 0.6em;left: 3.4em;display: block;border-right: 1px solid #e5e5e5;content: "";-webkit-transition: 0.35s ease-in-out;-moz-transition: 0.35s ease-in-out;-o-transition: 0.35s ease-in-out;transition: 0.35s ease-in-out;transition: all 0.35s ease-in-out;}
.input-group-icon .input-icon i {-webkit-transition: 0.35s ease-in-out;-moz-transition: 0.35s ease-in-out;-o-transition: 0.35s ease-in-out;transition: 0.35s ease-in-out;transition: all 0.35s ease-in-out;}
.col-half {padding-right: 10px;float: left;width: 50%;}
.col-half:last-of-type {padding-right: 0;}
@media only screen and (max-width: 540px) {
.col-half {width: 100%;padding-right: 0;}
}
</style>
</head>
<body style = "background-color:#f9f7f7">
<div class="top_slogan"><h1>Fill in Contract</h1></div>
<div class = "main_content_small">
<div class="stepper sliding page">
<section class="page active"
[class]="slidingStepperPage > 0 ? 'page previous' : 'page active'">
<div class="ampstart-input inline-block relative m0 p0 mb3 mt3">
<div class="row">
<h3 class="hcolor">Personaldaten</h3>
<div class="input-group input-group-icon">
<div class="col-half">
<input type="text" name="firstname" placeholder="Vorname *" required="required" on="input-debounced: AMP.setState({ disable: false })">
<div class="input-icon"><i class="fa fa-envelope"></i></div>
</div>
</div>
</div>
<div class = "input-group">
<button on="tap:AMP.pushState({ slidingStepperPage: slidingStepperPage + 1 })"
class="align-self-end ampstart-btn ampstart-btn-secondary caps"
disabled [disabled]="disable">next</button>
</div>
</section>
<section class="page next"
[class]="slidingStepperPage < 1 ? 'page next' :
(slidingStepperPage > 1 ? 'page previous' : 'page active')">
<h3>Sign in</h3>
<div class="ampstart-input inline-block relative m0 p0 mb3 mt3">
<input type="email" value="" name="email" autocomplete="email" id="id1" class="block border-none p0 m0" placeholder="Enter your Email"
on="input-debounced: AMP.setState({ email: event.value })">
<label for="ip1" class="absolute top-0 right-0 bottom-0 left-0" aria-hidden="true">
Enter your Email
</label>
</div>
</section>
</div>
</div>
</body>
</html>【问题讨论】：
标签： html google-chrome amp-html