微信小程序默认获取聚焦事件
2019-01-15 本文已影响927人
祈澈菇凉
在input里面设置focus
<input type="text" focus="{{inputShowed}}" />
左边的是input没有获取焦点事件,也没有键盘弹出。
// 搜索框状态
inputShowed: false,
右边的是input获取焦点事件,默认有键盘弹出。
// 搜索框状态
inputShowed: true,
具体代码
wxml
<view class="weui-search-bar">
<view class="weui-search-bar__form">
<view class="weui-search-bar__box">
<icon class="weui-icon-search_in-box" type="search" size="14"></icon>
<input type="text" class="weui-search-bar__input" placeholder="沪A6789" maxlength='10' value="{{inputVal}}" focus="{{inputShowed}}" />
</view>
</view>
</view>
wxss:(引入了全局框架WeUI,可省略不写)
/* 搜索 */
.weui-search-bar__input{
height: 72rpx;
}
.weui-icon-search_in-box{
top:22rpx;
}
.weui-search-bar__cancel-btn{
line-height:70rpx;
}
.weui-icon-clear{
top:4rpx;
}
js:
var app = getApp()
Page({
data: {
// 搜索框状态
inputShowed: false,
// 搜索框值
inputVal: "",
},
onLoad: function () {
},
});
原文作者:祈澈姑娘 技术博客:https://www.jianshu.com/u/05f416aefbe1
90后前端妹子,爱编程,爱运营,爱折腾。
坚持总结工作中遇到的技术问题,坚持记录工作中所所思所见,对于博客上面有不会的问题,可以加入qq群聊来问我:473819131.