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:'说说对这个活动看法吧'
          })
        }
      }
    })
  • 相关阅读:
    CentOS7 PXE安装批量安装操作系统
    004_MySQL 主从配置
    CentOS 桥接网卡配置
    玩转 Jupyter Notebook (CentOS)
    搭建专属于自己的Leanote云笔记本
    wetty 安装(web+tty)
    wget命令详解
    linux 下find---xargs以及find--- -exec结合使用
    Linux 交换分区swap
    Linux 时区的修改
  • 原文地址:https://www.cnblogs.com/cyf-1314/p/12388657.html
Copyright © 2011-2022 走看看