前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >微信小程序默认获取聚焦事件

微信小程序默认获取聚焦事件

作者头像
王小婷
发布2019-02-21 16:06:33
2.9K0
发布2019-02-21 16:06:33
举报
文章被收录于专栏:编程微刊编程微刊编程微刊

在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 () {
  },

});
本文参与 腾讯云自媒体分享计划,分享自作者个人站点/博客。
原始发表:2019.01.15 ,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体分享计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • 具体代码
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档