背景
实现一个weex的搜索页面，进入页面需要默认调起键盘
关键代码
<template>
<div>
...
<input ref="searchInput" @input="oninput" v-model="memberNamePhone" return-key-type="search" @return="searchClick()" class="input_Style" inputmode="text" placeholder="请输入客户姓名、手机号"/>
...
</div>
</template
···
methods: {
...
searchInputFocus(){
this.$refs.searchInput.focus()
}
...
},
mounted: function () {
this.searchInputFocus()
},
代码很简单，但是运行的时候问题就来了，iOS没有问题，进入页面就调起了键盘，但是Android进页面之后没有任何反应
内心OS
image.png
又遇到奇葩问题了
开始排查问题吧
第一步
官网找文档
focus() 0.8+
将 input 组件聚焦。
确认input识有这个方法的，查看demo示例，调用同样没问题，可以获取焦点...
<template>
<scroller>
<div class="holder">
<div class="item">
<div class="btn-holder">
<div class="btn" @click="focus"><text class="btn-text">focus</text></div>
<div class="btn" @click="blur"><text class="btn-text">blur</text></div>
</div>
<input ref="widget" class="input" type="text" @focus="handleFocus" @blur="handleBlur" @return="handleReturn" />
</div>
</div>
</scroller>
</template>
<script>
const modal = weex.requireModule('modal');
const toast = message => {
modal.toast({
message,
duration: 1,
});
};
export default {
data() {
return {
text: '0123456',
};
},
methods: {
focus() {
this.$refs.widget.focus();
},
blur() {
this.$refs.widget.blur();
},
handleFocus() {
toast('获得焦点');
},
handleBlur() {
toast('失去焦点');
},
},
};
</script>
修改demo代码把focus()方法放到mounted里面，方法同样失效了，看来是调用的时机不对
尝试在mounted里面延迟调用，但是还是没有效果
mounted: {
var self = this
setTimeout(function() { self.searchInputFocus(); }, 100); //100ms后将会调用执行searchInputFocus()函数
}
会不会是获取input组件有问题，打印一下看看
searchInputFocus(){
console.log(this.$refs.searchInput.focus())
this.$refs.searchInput.focus()
}
log输出没问题，组件信息可以打印出来，但是奇怪的事情发生了，input竟然获取焦点调起了键盘。
调用一次没反应，再调用一次就可以了？？？
随后在mounted去掉了延迟调用，又失效了。
根据官网介绍mounted难道不是加载完成之后调用的周期方法吗？是我调用的时机不对？
最终没有找到优雅的解决办法，暂时采用延迟调用两次focus()的蠢方案。。。得以解决。
先记录一下这个坑，有时间还需再查询相关资料以及源码看看到底是不是Weex的一个小bug，有待验证。
