美文网首页
小程序input起初隐藏,展示后自动聚焦展示键盘 实现

小程序input起初隐藏,展示后自动聚焦展示键盘 实现

作者: 生命不止运动不息 | 来源:发表于2020-06-24 16:37 被阅读0次

先看实现代码

//wxml 部分
<view class="inputBgView" hidden="{{showInputWordView}}">

<input class="inputWord" focus="{{showWordKeyboard}}" bindinput="getInputChar" value='{{inputChar}}'></input>
</view>

//js 部分
 startInputWord: function(){
      //点击补全单词,则展示输入框
      this.setData({showInputWordView:false});

      var that = this;
      setTimeout(function(){
        that.setData({showWordKeyboard:true});
      },50);
    },

代码逻辑:
想展示输入框时,调用startInputWord函数。

函数内部过程:
先展示输入视图,然后设置input 的focus 为true即可弹出键盘。
但试了N次效果都不好. 最后考虑到可能是 input从隐藏到展示,渲染视图会让input失去焦点。

因此想到,等渲染完毕再展示键盘,只好用了 延迟 聚焦input
最终实现 input 从隐藏到展示时,自动聚焦,弹出键盘的功能。

相关文章

网友评论

      本文标题:小程序input起初隐藏,展示后自动聚焦展示键盘 实现

      本文链接:https://www.haomeiwen.com/subject/mfarfktx.html