Question

我有一个放大灯箱和一个表格。

＆＃13;

 <amp-lightbox id="search-word"
                  layout="nodisplay">
        <div class="lightbox"
             on="tap:search-word.close"
             role="button"
             tabindex="0">
            
            <form id="search-word" role="search" action="https://localanagrammer.com/" target="_top">
                <div class="input-group">
                    <input type="text" id="searchWord" class="form-control" placeholder="enter scrabble word" data-ng-model="keyword" autocomplete="off" autofocus>
                    <span class="input-group-btn">
                        <button class="btn btn-default" type="button" data-ng-click="doSearch(keyword)">
                            <span class="fa fa-search" aria-hidden="true"></span>
                        </button>
                    </span>
                </div>
            </form>
        </div>
    </amp-lightbox>

＆＃13;

当我尝试点击文字输入时，灯箱正在关闭。

问题是：阻止关闭的正确方法是什么？

Answer 1

根据此documentation，在灯箱内的一个或多个元素上设置on属性并将其设置为close将在元素为时关闭灯箱点击或点击。

我认为此代码on="tap:search-word.close"是您点击文字输入时灯箱关闭的原因。

Answer 2

我通过在内部元素中放置一个带有打开动作的水龙头来解决它。这里类似的情况是（这是一个呈现AMP html的React代码）：

        <amp-lightbox
            id="mylightbox"
            on="tap:mylightbox.close"
            class="dark-lightbox-background"
            layout="nodisplay">
            <div 
                class="container"
                on="tap:mylightbox.open">

                 <!-- content placed here -->

            </div>
        </amp-lightbox>

AMP-html如何在用户点击输入时阻止灯箱关闭

2 个答案: