微信小程序实现动态获取输入框的字符长度

敲代码的TKP

已于 2022-02-14 15:09:08 修改

阅读量3.7k

点赞数 3

分类专栏：小程序文章标签： javascript

于 2021-05-20 11:05:11 首次发布

TKP

本文链接：https://blog.csdn.net/TKP666/article/details/117062282

版权

小程序专栏收录该内容

18 篇文章 4 订阅

订阅专栏

以限制100字以内为例

HTML：

 <textarea value="{{introduce}}" maxlength="100" name="textarea" bindinput='limitWord'>
 </textarea>
<view class="wordNum">({{currentWord}}/100)</view>

JS：

 data: {
    currentWord: 0, //已经输入的字符长度
    introduce:"这边是显示的文字",
  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
    this.setData({
    //进页面的时候获取一下输入框内原本的字符长度
      currentWord: this.data.introduce.length
    });
  },
	//用户输入时一直触发此方法，改变currentWord的值
  limitWord: function (e) {
    var that = this;
    var value = e.detail.value;
    var wordLength = parseInt(value.length); //解析字符串长度转换成整数。
    if (100 < wordLength) {
      return;
    }
    that.setData({
      currentWord: wordLength
    });
  },

  /**