7--input 保存按钮禁用可用

最新推荐文章于 2024-04-11 11:25:52 发布

小芹儿

最新推荐文章于 2024-04-11 11:25:52 发布

阅读量382

点赞数 2

CC 4.0 BY-SA版权

分类专栏：微信小程序

本文链接：https://blog.youkuaiyun.com/xu_ze_qin/article/details/106907809

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

19 篇文章

订阅专栏

本文介绍了如何在前端页面中根据输入框是否有值来控制保存按钮的禁用或启用状态。通过设置样式、数据属性以及监听input事件实现动态控制。在数据传给后台时，分享了解决获取input值的方法，即直接使用data中的classname属性。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

在这里插入图片描述
首先搭建页面：

<view class="page">
  <view class="top">
    <!--  路由组件传参 -->
    <text>班级名称</text>
    <button type="submit" bindtap="save" class="save" disabled='{{isDisabled}}'>保存</button>
  </view>
  <input class="xin" bindinput="bind_banji" placeholder="请输入班级名称"></input>
</view>

把样式写好：禁用和可用样式>>

.top {
  display: flex;
  justify-content: space-between;
  margin: 10px 15px;
  align-items: center;
}
/* 设置不可用状态的背景色 */
button[disabled]{
  background-color: #eaeaea !important;
  color: #fff;
}

.top .save{
  width: 17%;
  padding: 5rpx;
  margin: 0;
  font-weight: none;
  font-size: 40rpx;
  color: #fff;
  background-color: #298EF7;
}

.xin {
  border-bottom: 1px solid #ccc;
  margin: 15px;
}

在这里插入图片描述

data里写一个存值的名字，和页面加载完成时状态是否可用>>

  data: {
    classname: '',
    isDisabled: true, //表示页面加载完成时disabled为禁用状态
  },

最重要的input获取值，监听input，若没有值，按钮则禁用状态，反之可用

 //input的值   
  bind_banji: function(e) {
    var classname = e.detail.value
    this.setData({
      classname: classname
    })
    console.log(classname)
    if (classname !== '') {
      this.setData({
        isDisabled: false //修改isDisabled的值为false（即启用状态）   
      })
    } else {
      this.setData({
        isDisabled: true
      })
    }
  },