WXOPEN Club

软键盘如何手动收起

发布于 6 年前作者 uhuang18559 次浏览最后编辑 6 年前来自 ask

我在写一个评论框text-area，由于页面设计，该评论框定位使用绝对定位，如下所示

<view class=‘container’>

    <view></view>

    …

    <view class=‘text-area-wrapper’ >

        <text-area></text-area>

    </view>

</view>

.text-area-wrapper { position: absolute; …}

我在隐藏 text-area-wrapper 这个容器的时候，如果软键盘此时拉起会导致页面 container 样式错乱，我测试后解决方式是，隐藏 text-area-wrapper 之前需手动将软键盘收起，再做隐藏操作。但我查阅了官方文档和百度后，都没有发现有如何手动收起软键盘的方案。请问我该如何实现这个功能。

ps：我发现腾讯视频的评论也是类似我这种效果，不过腾讯视频能实现 先隐藏软键盘，再隐藏界面。

6 回复
yangtian
yangtian1 楼6 年前

你是在找 wx.hideKeyboard() 吗

gongna
gongna2 楼6 年前

还真是哎！官网都找不到API了

juanyin
juanyin3 楼6 年前

别轻易用  鬼知道有啥bug

sunxiulan
sunxiulan4 楼6 年前

今天下午尝试了下，目前的措施只能先让 text-area 失去焦点，再隐藏 wrapper 这个容器，需要采取延时操作。具体代码如下：

html

<view class="wrapper {{ showWrapper ? '' : 'hide' }}">

        <text-area focus="{{ textAreaFocus }}"></text-area>

</view>


css

.hide  { display: none; }


js

data: {

    showWrapper: true,

    textAreaFocus: true

},

...

methods: {

    hideWrapper () {

         // 必须采取延时操作，如果采取一起改变状态的操作，页面样式还是会混乱

        this.setData({

            textAreaFocus: false 

        });

        setTimeout(()=> {

            this.setData({ showWrapper: false });

        }, 500);       

    }

}



dfeng
dfeng5 楼6 年前

wx.hideKeyboard()废弃了

jingfan
jingfan6 楼4 年前
focusBooleanfalse获取焦点

失去焦点他就会收起来，你试试可以不