zoukankan      html  css  js  c++  java
  • 微信小程序input、textarea层级穿透问题 问题描述:表示在文本域输入内容,在失去焦点时,内容脱离文本框

     解决思路:借助一个变量使其在得到焦点的时候是文本域或者文本框,失去焦点的时候变成div
    
    在wxml中
    
    <view class="questionBack-box hideBtn">
    <textarea
    value="{{content}}"
    bindblur="bindContentBlur"
    wx:if="{{isInputContentFocus}}"
    placeholder="说说对这个活动看法吧"
    focus="{{isFocus}}"
    ></textarea>
    <div class="placeholder" wx:else bindtap="bindContentFocus">{{placeholder}}</div>
    </view>
    
    在wxss中
    
    .placeholder{
    cursor: auto;
     100%;
    height: 300rpx;
    display: block;
    position: relative;
    overflow-y: scroll;
    }
    .questionBack-box textarea,.placeholder{
    font-size:22rpx;
    color:rgba(111,116,121,1);
    line-height:30rpx;
    text-align: left;
    padding-left: 20rpx;
    box-sizing: border-box;
    }
    
    在js中输入
    
    Page({
      data: {
        content:'',
        placeholder:'说说对这个活动看法吧',
        isInputContentFocus: false,
        isFocus: false
      },
      bindContentFocus(e) {  
        this.setData({
          isFocus : true, //触发焦点
          isInputContentFocus: true//聚焦时隐藏内容文本标签
        })
      },
      bindContentBlur(e) {  
        this.setData({
          isInputContentFocus : false,     //聚焦时隐藏内容文本标签
          isFocus : false, //失去焦点
          content:e.detail.value,
          placeholder: e.detail.value
        })
        if (e.detail.value== '') {
          this.setData({
            placeholder:'说说对这个活动看法吧'
          })
        }
      }
    })
  • 相关阅读:
    使用Datagrip导入excel数据
    idea2020版本的lombok不能使用
    wait和notify
    死锁的原因
    synchronized关键字
    线程JOIN
    JSON解析精度丢失问题(net.sf.json)
    线程中断
    spring boot 2.0.0 + mybatis 报:Property 'sqlSessionFactory' or 'sqlSessionTemplate' are required
    2、Dubbo源码解析--服务发布原理(Netty服务暴露)
  • 原文地址:https://www.cnblogs.com/cyf-1314/p/12388657.html
Copyright © 2011-2022 走看看