小程序input起初隐藏,展示后自动聚焦展示键盘 实现
2020-06-24 本文已影响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 从隐藏到展示时,自动聚焦,弹出键盘的功能。