美文网首页小程序
微信小程序默认获取聚焦事件

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

作者: 祈澈菇凉 | 来源:发表于2019-01-15 11:07 被阅读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.

    相关文章

      网友评论

        本文标题:微信小程序默认获取聚焦事件

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