html amp按钮禁用

时间：2018-07-07 18:19:08

标签： html google-chrome amp-html

我正在尝试在html-amp中实现步进滑动形式。我有一个页面要在其中实现按钮，当在输入名字中输入某些输入时，该按钮应启用。我的按钮仍然处于禁用状态，我尝试了多种实现方法，但均未成功。 我想实现诸如disable [disabled] =“！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>

1 个答案:

答案 0 :(得分：1)

您只需要进行小改动

on="input-debounced: AMP.setState({ disable: false })"

到

on="input-debounced: AMP.setState({ disable: event.value!='' ? false : true })"


<!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: event.value!='' ? false : true })">
                <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>

相关问题
最新问题