公告列表
公告列表
收藏
回答

input隐藏但placeholder仍然显示问题

框架类型 问题类型 操作系统 工具版本
小程序 Bug macOS 2.7.0

- 当前 Bug 的表现（可附上截图）


- 预期表现


- 复现路径

xxx

- 提供一个最简复现 Demo


HTML

<view wx:if="{{!select_address}}">
  <!-- 操作按钮 -->
  <view class="revise_operate_btn">
    <text class="cancel_btn">取消</text>
    <text class="comfirm_btn">确认</text>
  </view>
  <!-- 表单模块 -->
  <view class="form_section" >
    <view class="input_section">
      <!-- 地址 -->
      <view class="input_box">
        <view class="input_icon_box">
          <image src="../../assets/map.png" class="input_icon" mode="widthFix"></image>
        </view>
        <input placeholder='请输入地址' class="input" value="{{receive_address}}"  bindtap='focus'></input>
      </view>
    </view>
  </view>
</view>
 
<!-- 选择地址 -->
<view class='select_address' wx:else>
  <view class='clearfix'>
    <input type='text' placeholder='填写小区和大厦' class="select_input" focus='true'></input>
    <view class='revise_cancel' bindtap='cancel'>取消</view>
  </view>
</view>


css

/* 修改地址页面 */
.revise_page{
  width:100%;
  height:100%;
  background:#fff;
  position:absolute;
  top:0;
  left:0;
  z-index:11;
}
.revise_operate_btn{
  width:100%;
  height:70rpx;
  font-size:28rpx;
  background:#fff;
}
.cancel_btn,.comfirm_btn{
  padding:15rpx 30rpx;
}
.cancel_btn{
  position:absolute;
  left:0;
  top:0;
}
.comfirm_btn{
  position:absolute;
  right:0;
  top:0;
}
 
/* 表单模块 */
.form_section{
  font-size:30rpx;
  border-radius:10rpx;
  padding:15rpx 15rpx;
}
.input_section{
  background:#fff;
  border-radius:5rpx;
  margin-bottom:15rpx;
}
.input_box{
  height:auto !important;
  border-bottom:1px solid #ececec;
  display:flex;
}
.input_icon_box{
  width:80rpx;
  padding-left:10rpx;
  line-height:93rpx;
  text-align:center;
}
.input_icon{
  width:35rpx;
}
.input{
  width:100%;
  height:85rpx;
  padding-right:15rpx;
  line-height:85rpx;
}
/* 模糊搜索 */
.fuzzy_search{
  background:#fff;
}
.user_msg text{
  color:gray;
  font-size:28rpx;
  padding-right:100rpx;
}
 
/* 选择地址 */
.select_address{
  width:100%;
  height:100vh;
  font-size:30rpx;
  background:#fff;
}
.select_address .select_input{
  width:75%;
  height:75rpx;
  margin:15rpx 15rpx 0 30rpx;
  padding-left:35rpx;
  line-height:75rpx;
  background:#EBEBEB;
  border-radius:50rpx;
  float:left;
}
.select_address .revise_cancel{
  height:75rpx;
  line-height:75rpx;
  padding:10rpx 20rpx;
  float:left;
}
 
 
/* placeholder样式 */
.carCode-placeholder{
  color:#ccc;
  text-align:right
}
.carCode{
  color:#000;
  text-align:center;
  padding-right:20rpx;
}



js

Page({
  data: {
    select_address: false,
  },
  focus() {
    this.setData({
      select_address: true
    })
  },
  cancel() {
    this.setData({
      select_address: false
    })
  },
})


最后一次编辑于  2019-05-31
回答关注问题邀请回答
收藏

1 个回答

请 登录 后发表内容
相关问题
相关文档