topTips 提示会隐藏在手机屏幕上方

iori2882 commented 4 years ago

如下代码,当有 weui-formtitle weui-formdesc 样式时,id='inCode'的input输入字符,弹出数字键盘,这时整个页面会向上缩进一块...然后点击下一步,第一次可以正常显示错误提示,在手机屏幕可见的顶部显示,再次点击下一步,错误提示就缩到手机屏幕不可见区域的顶部显示了,必须下滑屏幕才能显示出来错误提示,表述的可能不清楚,可以给我留个信箱,我发个视频过去...

<div class="weui-form__text-area">
        <h2 class="weui-form__title">我的标题</h2>
        <div class="weui-form__desc">some</div>
    </div>
    <div class="weui-form__control-area">
        <div class="weui-cells__group weui-cells__group_form">
            <div class="weui-cells weui-cells_form" id="checkBoxList">
                <div class="weui-cell">
                    <div class="weui-cell__hd"><label class="weui-label">manyGoods</label></div>
                    <div class="weui-cell__bd">
                        <input id='inCode' class="weui-input" type="number" pattern="[0-9]*" value="">
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="weui-form__opr-area" id="tjBtn">
        <a class="weui-btn weui-btn_primary weui-btn_disabled" href="javascript:" id='bind'>下一步</a>
    </div>

uxsi commented 4 years ago

@iori2882 这是因为键盘弹起的时候页面viewport位置发生变化，可以考虑在聚焦输入框的时机隐藏提示或者重新计算并设置提示的位置等方法规避，是h5的共性问题，weui暂时不做处理

iori2882 commented 4 years ago

谢谢您的回复,明白了

Tencent / weui

topTips 提示会隐藏在手机屏幕上方 #828