zoukankan      html  css  js  c++  java
  • 小程序textarea文本域字数控制---并显示已输入字数

    有时候我们在写项目的时候,用到input或者textarea的时候,可能需要对输入的字数进行一个限制和显示,效果图如下:

    输入文字后的效果图是这样的:

    下面闲话少说 把这个小功能分享给大家,先是wxml:

    <view class="conts">
      <textarea class="areas" placeholder='空空如也,快点评论吧' minlength="{{min}}" maxlength="{{max}}" bindinput="inputs"> 
        <text class="currentWordNumber">{{currentWordNumber}}/{{max}}</text>
        <text class="hint">{{texts}}{{num}}{{textss}}</text>
      </textarea>
    </view

    然后wxss:

    .conts{
      width: 750rpx;
      height: auto;
      border: 1rpx soldi red;
      margin-top: 30rpx;
    }
    .areas{
      height:152rpx;
      font-size: 30rpx;
      text-indent: 28rpx;
      border: 1rpx solid gainsboro;
      padding-top: 30rpx;
      margin: 0 auto;
      overflow: hidden; 
      position: relative; 
    }
    .currentWordNumber{
      font-size: 28rpx;
      color: gray;
      position: absolute;
      left: 480rpx;
      top: -6rpx;
    }
    .hint{
      font-size: 28rpx;
      position: absolute;
      top: 130rpx;
      left: 320rpx;
      color: #FF6600;
    }

    最后是js:

    Page({
    data: {
    texts: "至少需要15个字",
    min: 15,//最少字数
    max: 520, //最多字数 (根据自己需求改变) 
    currentWordNumber:0
    },
    
    //字数限制 
    inputs: function (e) {
    // 获取输入框的内容
    var value = e.detail.value;
    // 获取输入框内容的长度
    var len = parseInt(value.length);
    console.log(len)
    //最少字数限制
    if (len <= this.data.min)
    this.setData({
    texts: "至少还需要",
    textss: "字",
    num:this.data.min-len
    })
    else if (len > this.data.min)
    this.setData({
    texts: " ",
    textss: " ",
    num:''
    })
    
    this.setData({
    currentWordNumber: len //当前字数 
    });
    //最多字数限制
    if (len > this.data.max) return;
    // 当输入框内容的长度大于最大长度限制(max)时,终止setData()的执行
    
    console.log(this.data)
    }
    })

     转载至https://blog.csdn.net/qq_42345906/article/details/85336060

  • 相关阅读:
    python
    Yii框架的学习指南(策码秀才篇)1-1 如何认识Yii framework
    yii执行流程简单介绍
    html5页面编码如何确定
    防止表单重复提交的几种策略
    2维数组排序
    YII框架开发一个项目的通用目录结构:
    phpcms添加图片投票
    windows下面apache配置虚拟目录(测试使用,发布网站不建议目录访问)
    js获取浏览器的版本代码
  • 原文地址:https://www.cnblogs.com/mlw1814011067/p/12880381.html
Copyright © 2011-2022 走看看