小程序中input框聚焦添加下划线

最新推荐文章于 2022-05-10 20:45:56 发布

small_animation

最新推荐文章于 2022-05-10 20:45:56 发布

阅读量1k

点赞数

分类专栏：微信小程序文章标签： input

本文链接：https://blog.csdn.net/small_animation/article/details/100941874

版权

微信小程序专栏收录该内容

10 篇文章 1 订阅

订阅专栏

		<form bindsubmit="formSubmit">
            <view class="mui-table-view">
                <view class="mui-table-view-cell">
                <view class="view-cell {{status==0 ? 'view-active':'moren'}}" style="padding-top:20px;">
                    <text>用户名</text>
                    <input type="text" name="name" value="{{myname}}" bindfocus="focus"  bindblur='blur' data-index="0"/> <!-- 设置data-index="0" -->
                </view>
                </view>
            </view>
            <view>
                <view class="mui-table-view-cell">
                <view class="view-cell {{status==1 ? 'view-active':'moren'}}">
                    <text>手机号</text>
                    <input type="text" name="phone" value="{{myphone}}" bindfocus="focus"  bindblur='blur' data-index="1"/>
                </view>
                </view>
            </view>
            <view class='submit'>
                <button formType="submit">提 交</button>
            </view>
    </form>

/* pages/myinfo/myinfo.wxss /
.view-cell{
margin: auto;
width: 100%;
display: flex;
justify-content: space-between;
line-height: 40px;
border-bottom: 1px solid #e2e2e2;
box-sizing: border-box;
align-items: center;
color: #6c6c6c;
}
/ input框聚焦时更改或添加下划线样式 */
.view-active{
border-bottom: 1px solid #83D3F8;
}

// pages/myinfo/myinfo.js
/* 文本框聚焦时更改状态*/
focus: function (e) {
var index = e.currentTarget.dataset.index;
if(index == 0) {
this.setData({
status: 0
})
};
if (index == 1) {
this.setData({
status: 1
})
};

},
/* 文本框失焦时更改状态*/
blur: function (e) {
var index = e.currentTarget.dataset.index;
if (index == 0) {
this.setData({
status: 1
})
};
if (index == 1) {
this.setData({
status: 0
})
};
}