zoukankan      html  css  js  c++  java
  • 微信小程序textarea输入框 及方法实现

    wx.ml

        <view class="con">
            <textarea name="" id="" class="inputText" cols="30" rows="10" value="{{inputText}}" placeholder="(选填)留下您的评语吧~" bindinput="getInputText"></textarea>
            <input disabled class="textword" value="{{inputTextLen+'/100'}}" />
        </view>
    View Code

    wx.ss

    .con {
       630rpx;
      /* height: 250rpx; */
      position: relative;
      margin-top: 10rpx;
      flex-wrap: wrap;
      margin-bottom: 60rpx;
    }
    
    .inputText {
      display: block;
      padding: 20rpx 30rpx;
      box-sizing: border-box;
       682rpx;
      height: 250rpx;
      border-radius: 20rpx;
      border: 1rpx solid #D8D8D8;
      font-size: 32rpx;
      font-family: PingFangSC-Regular, PingFang SC;
      font-weight: 400;
      color: #222222;
      line-height: 32rpx;
    }
    
    .textword {
      position: absolute;
      right: 20rpx;
      bottom: 20rpx;
      font-size: 24rpx;
      font-family: PingFangSC-Regular, PingFang SC;
      font-weight: 400;
      color: #aaaaaa;
      line-height: 24rpx;
      text-align: right;
    }
    View Code

    wx.js

    data:{
        inputText: '',
        inputTextLen: 0
    },  
    //输入自动计算字体长度
      getInputText: function (e) {
        // console.log(e.detail.value);
        // if (e.detail.value !== this.inputText) {
        //   this.inputText = e.detail.value;
    
        // }
        let inputText = e.detail.value;
        if (e.detail.value.length > 100) {
          inputText = inputText.substring(0, 100);
        }
        this.setData({
          inputText: inputText,
          inputTextLen: 0 || inputText.length
        })
      },
    View Code
  • 相关阅读:
    Linux PXE无人值守网络装机
    Linux 自动化部署DNS服务器
    Linux DNS服务配置
    Mysql数据库基础学习笔记
    Linux AIDE(文件完整性检测)
    mysql:[Err] 1068
    sql的date、时间函数、时间戳
    hive之建立分区表和分区
    excel转sql代码
    spark-submit之使用pyspark
  • 原文地址:https://www.cnblogs.com/lvlisn/p/15660183.html
Copyright © 2011-2022 走看看