AMP 电子邮件在 Gmail 移动应用程序上运行良好。但是在网络版本上，当我尝试导航出 AMP 电子邮件而不对表单元素进行任何更改时，它会显示此弹出消息：
放弃电子邮件草稿
在此电子邮件中所做的更改将会丢失
我在 amp-list 中有我的表格：
<amp-list items="logs" width="100" height="100" layout="responsive" id="comments"
src="...">
<template type="amp-mustache">
<div class="entry">
...
</div>
{{#last}}
<form id="commentbox" method="post" on="submit-success:comments.refresh,commentbox.clear"
action-xhr="...">
...
</form>
{{/last}}
</template>
</amp-list>
复制步骤：
- 复制此 HTML：
<!doctype html>
<html ⚡4email data-css-strict>
<head>
<meta charset="utf-8">
<script async src="https://cdn.ampproject.org/v0.js"></script>
<script custom-element="amp-list" src="https://cdn.ampproject.org/v0/amp-list-0.1.js" async></script>
<script custom-element="amp-form" src="https://cdn.ampproject.org/v0/amp-form-0.1.js" async></script>
<script custom-element="amp-timeago" src="https://cdn.ampproject.org/v0/amp-timeago-0.1.js" async></script>
<script custom-template="amp-mustache" src="https://cdn.ampproject.org/v0/amp-mustache-0.2.js" async></script>
<style amp4email-boilerplate>body{visibility:hidden}</style>
<style amp-custom>
body{ font:small/1.5 Arial,Helvetica,sans-serif; }
.response{ padding-top:5px; padding-bottom:15px; }
.task{
width:100%; margin:auto; padding-top:20px;
border-top:1px solid rgba(0,0,0,0.1);
}
.entry{
display:grid; width:98%;
grid-template-columns:80px auto max(110px); column-gap:10px;
grid-template-rows:30px auto; padding-bottom:30px;
grid-template-areas:'status by ago' 'empty message message';
}
.status{ grid-area:status; overflow:hidden; }
.status span{ vertical-align:top; padding:5px 10px;
width:58px; text-align:center; font-size:12px; font-weight:500; line-height:22px;
border-radius: 100px; color: #522AE9; background-color: #dad1fd; }
.by{ grid-area:by; overflow:hidden; font-size:12px; color:#666; padding:5px 5px 5px 0px; }
.message{ grid-area:message; font-size:14px; color:#000; }
.ago{ grid-area:ago; font-size:12px; color:#666; padding:5px 5px 5px 0px; text-align:right; }
#commentbox fieldset{ padding:0px; border:none; }
#commentbox .comment-status{ padding-bottom:10px; font-weight:500; color:#522ae9; }
#commentbox .comment-status[submit-error]{ color:#dc3545; }
#commentbox .comment-status[submit-success]{ color:#1c7e26; }
.comment-box{
background:#F6F6F6; padding:15px; border-radius:5px;
margin-bottom:20px; text-align:right;
display: grid; grid-template-columns: 1fr 6fr 1fr;
}
.comment-box textarea{
display:block; width:100%; grid-column-start:1; grid-column-end:8; padding:4px;
font-family:arial; font-size: 14px; line-height: 24px;
color: rgba(0,0,0,0.8); background-color: #fff; background-clip: padding-box;
border: 1px solid rgba(0,0,0,0.1); border-radius: 3px;
}
.comment-box select{
padding:2px; height:28px; margin-top:18px;
font-family:arial; font-size:14px; line-height:16px;
color: rgba(0,0,0,0.8); background-color: #fff; background-clip: padding-box;
border: 1px solid rgba(0,0,0,0.1); border-radius: 3px;
}
.comment-box .submit{
display: inline-block; padding: 5px 10px; margin-top:10px; cursor:pointer;
font-size: 14px; line-height:22px; letter-spacing: 0; border-radius: 5px;
color: #fff; background-color: #3f1bca; border: 1px solid #522AE9;
}
@media (max-width:800px){
.status span{ padding:2px 5px; font-size:9px; font-weight:400; }
.by{ font-size:9px; }
.message{ font-size:12px; }
.ago{ font-size:9px; }
.comment-box textarea{ font-size:12px; }
.comment-box select{ font-size:12px; }
.comment-box .submit{ font-size:12px; }
}
@media (min-width:801px){
.status{ padding-top:3px; }
.entry{ column-gap:30px; width:100%; }
}
</style>
</head>
<body>
<div class="task">
<amp-list items="logs" width="100" height="100" layout="responsive" id="comments" src="https://mailrecipe.com/pers/amp/1FAIpQLSfnGpEj7duU4VlD46-5mVgAMvrnNpZesL-WGJQsN3QkMjVCJw/response/2_ABaOnuemdRDB6PSNQviuv-wC0RnvILP7RlGVuL9RiX8VhWjEWGYgaXYKTeY-aMb_JXBtuXo">
<template type="amp-mustache">
<div class="entry">
<div class="status">
<span style="color:{{color}}; background-color:{{bg}};">{{tab}}</span>
</div>
<span class="by">
{{by}}
</span>
<span class="ago">
<amp-timeago height="30" datetime="{{date}}" locale="en">
{{date}}
</amp-timeago>
</span>
<div class="message">{{comment}}</div>
</div>
{{#last}}
<form id="commentbox" method="post" on="submit-success:comments.refresh,commentbox.clear" action-xhr="https://mailrecipe.com/pers/amp/1FAIpQLSfnGpEj7duU4VlD46-5mVgAMvrnNpZesL-WGJQsN3QkMjVCJw/response/2_ABaOnuemdRDB6PSNQviuv-wC0RnvILP7RlGVuL9RiX8VhWjEWGYgaXYKTeY-aMb_JXBtuXo">
<fieldset>
<div class="comment-status" submitting>
Updating your comment ...
</div>
<div class="comment-status" submit-success>
Your comment has been updated!
</div>
<div class="comment-status" submit-error>
Update failed!
</div>
<div class="comment-box text-right">
<textarea name="comment" placeholder="Enter your comment"></textarea>
<select name="moveto">
<option value="">- Move to -</option>
<option value="submitted">Submitted</option>
<option value="approved">Completed</option>
<option value="archive">Trash</option>
</select>
<div></div>
<input type="submit" class="submit" value="Send">
<input type="hidden" name="by" value="mani.doraisamy@gmail.com">
</div>
</fieldset>
</form>
<br />
{{/last}}
</template>
</amp-list>
</div>
</body>
</html>
- 前往Gmail 游乐场向自己发送 AMP 电子邮件。
- 打开您的 Gmail 网络版并查看此电子邮件
- 导航出电子邮件而不对表单字段进行任何更改以查看“放弃”对话框。
如何避免此对话框？